How to put a responsive clear button inside HTML input text field ?
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 resposive 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.
- jQuery Code:
Final solution: In this section, we will combine all the sections together, but have to use CDN links if you want to achieve the task by using the jQuery section.
- CDN jQuery link:
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.