How to put a responsive clear button inside HTML input text field ?

To create a responsive, clear button inside an HTML input field, we need to carefully position both the input field and the button within the same container. Using CSS, the button can be positioned on the right side of the input field, and JavaScript or jQuery will handle the clearing functionality when the button is clicked.

Basic Structure

We first create the input field and a button, both placed inside the same div. Here’s how the basic HTML structure would look:

HTML Code:

<div class="input-container">
  <input type="text" id="textInput" placeholder="Type something...">
  <button id="clearButton">Clear</button>
</div>

Designing the Structure:

To make the button appear inside the input field, we need to position it correctly using CSS. The parent div will be set to relative so that the button can be absolutely positioned inside the div, allowing it to appear at the right end of the input field.

CSS Code:

.input-container {
  position: relative;
  width: 100%;
  max-width: 300px; /* Optional: Adjust based on your design */
}

#textInput {
  width: 100%;
  padding-right: 40px; /* Leave space for the clear button */
  padding: 10px;
  box-sizing: border-box;
}

#clearButton {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: #ff4c4c;
  color: white;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  z-index: 1;
}

#clearButton:hover {
  background-color: #ff0000;
}

In this code:

• The position: absolute; on the button ensures it stays inside the container, while right: 10px; places it at the far right of the input field.
• The top: 50%; and transform: translateY(-50%); vertically center the button inside the input.
• The padding-right on the input ensures the text doesn’t overlap with the button.

Making It Functional:

Now, we need to make the clear button functional so that it clears the text when clicked. This can be done using either vanilla JavaScript or jQuery.

JavaScript Code:

document.getElementById("clearButton").addEventListener("click", function() {
  document.getElementById("textInput").value = "";
});

jQuery Code:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
        crossorigin="anonymous"></script>

<script>
  $('#clearButton').click(function() {
    $('#textInput').val('');
  });
</script>

Both snippets do the same thing: they listen for a click on the button and, when triggered, clear the input field’s value.

Making It Responsive:

By using percentages for widths and ensuring the elements are properly aligned, the design remains responsive across different screen sizes.

Responsive CSS Adjustments:

@media screen and (max-width: 600px) {
  .input-container {
    max-width: 100%;
  }
  
  #clearButton {
    right: 5px; /* Adjust spacing for smaller screens */
  }
}

This media query ensures that the layout adapts to smaller screen sizes by adjusting the maximum width and button spacing.

Output:

Responsive clear field button

HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn more about HTML, CSS and jQuery from the links given below:

• HTML Tutorial and HTML Examples
• CSS Tutorial and CSS Examples
• jQuery Tutorial and jQuery Examples