Menu
I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.
This is to save space rather than having a clear link outside of the input box.
My CSS skills are weak... Here is a screenshot photo of how the iPhone looks.
386
The easiest way to add an input box with a clear button is to add an input element with the type attribute set to search . Then when we type into the input box, we see the clear button displayed. And we can click on it to clear its value.
Type the <input type="reset"> tag into the code towards the top and/or bottom of the HTML form. Close the form after all input fields are entered with a final </form> tag. Save and preview your new adjusted form with the new reset button.
Use the tag <i> to display the eye icon. This icon is also known as the visibility eye icon.
Nowadays with HTML5, it's pretty simple:
<input type="search" placeholder="Search..."/> Most modern browsers will automatically render a usable clear button in the field by default.
(If you use Bootstrap, you'll have to add an override to your css file to make it show)
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; } 
Safari/WebKit browsers can also provide extra features when using type="search", like results=5 and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:
input[type=search] { -webkit-appearance: none; } See css-tricks.com for more info about the features provided by type="search".
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
