Open In App

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

Last Updated : 17 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

To embed a responsive clear button within an HTML input text field, you create both elements within a shared container. Using CSS, position the button within the input field, typically at the right end. JavaScript or jQuery can enable functionality to clear the input’s content upon button click.

Creating structure: In this section, we will create the basic structure for the input field. 

  • HTML Code: By using the HTML, we will place the input field where we will add a responsive button to clear the field. We create a text field and a button and we place them inside the same division. In order to fit the button into input text field, the following css is required
  • Designing structure: In this section, we will design the structure to make it attractive or meaningful. 
  • CSS Code: Set the position attribute of parent division to relative. Set the position of the button as absolute inside the division. The above two actions makes it possible for us to shift the button to the top right position of the div which would move the button inside the input field and place it at the right end. To do this, we set top and right margins to 0px, however this value can be varied depending on the design requirement. We put a Z-Index greater than one to position the button at layer above the input field.
  • Responsive structure: In this section, we can use any of the below code sections to make it responsive by using vanilla JavaScript or we can also use jQuery for that. In the two below methods, the basic approach is the same. We listen for the click event on the button and once it is triggered we set the value of the input field to a null string.
  • JavaScript Code: The javascript code for making the clear button responsive. 
  • jQuery Code: Use the below command to add Jquery CDN to your file.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Responsive clear field button</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <b>Responsive clear field button</b>
    <br><br>
    <div class="buttonIn">
        <input type="text" id="enter">
        <button id="clear">clear</button>
    </div>
</body>

</html>
CSS
<style>
    h1 {
        color: green;
    }
    
    .buttonIn {
        width: 300px;
        position: relative;
    }
    
    input {
        margin: 0px;
        padding: 0px;
        width: 100%;
        outline: none;
        height: 30px;
        border-radius: 5px;
    }
    
    button {
        position: absolute;
        top: 0;
        border-radius: 5px;
        right: 0px;
        z-index: 2;
        border: none;
        top: 2px;
        height: 30px;
        cursor: pointer;
        color: white;
        background-color: #1e90ff;
        transform: translateX(2px);
    }
    
</style>
Javascript
<script>
    window.addEventListener('load', () => {
        const button = document.querySelector('#clear');
        button.addEventListener('click', () => {
            document.querySelector('#enter').value = "";
        });
    }); 
</script>
Javascript
$(document).ready(()=> {
    alert("nigge")
    $('#clear').on('click', () =>{
        $('#enter').val("");
    })
});

Output: Click here to see live code output

Responsive-Button-2

responsive clear button inside HTML input text field Example Output

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:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads