Use the bootstrap layout to add a one-click clear icon in the input input box, such as the one-click clear icon in the login name input box and the small eye icon that displays the password in the password input box, as shown in the figure below:
However, when putting the icons into the input input box, these small icons cannot get click events;
So the question is, how can these small icons get click events?
I don't know, but I can use a roundabout way to implement this function indirectly .
***The key point is:
Solution: Add an invisible element to the position of the small icon, and the size of the element just covers the small icon, but there is no background color and border; it is equivalent to covering the small icon with a transparent quilt;
Copy the code as follows: <div>
<span><i></i></span>
<input type="text" placeholder="Account/Mobile Number/Email" id="userName">
<span style="display:inline-block;"></span> <--Small icon element-->
<span style="display:inline-block;border:1px solid red;width:30px;height:30px;position:absolute;right:2px;z-index:100;cursor: pointer;"></span> <--Elements over the small icon-->
</div>
Add events to this element that is overlaid on the small icon. The function of the small icon is only to display and hide as needed;
This is indirectly realized. Is the click effect of the small icon a great solution? Thank you for your reading, and I hope it can help you solve the problem smoothly.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial