Kevin Powell - Community•4mo ago

what do you called an input type text and has an x in it to clear the content?

in some of the search bar we can observe there is an x button inside the input element to clear the input field what it is called technically?

4 Replies

Jochem•4mo ago

I'd call it a clear button, probably. There's also input type="search" which MDN claims "May include a delete icon in supporting browsers that can be used to clear the field."

majkl•4mo ago

Look at the "X" in DOM ionspector to seed what exactly the markup is and whether a js (click) event is bound to it. It is not an inherent part of an inoput field, rather an added reset for the field indeed.

Jochem•4mo ago

some browsers used to add it on their own though, even in regular input fields. And like I said, if you use type search they still might, it's worth testing

clevermissfox•4mo ago

To get rid of it, these selectors are used in css

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }

input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }

input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

Idk if that helps with what it’s “called” but may give you some search terms (no pun intended) to start from

Gaming

Programming

what do you called an input type text and has an x in it to clear the content?