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
Jochem9mo 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
majkl9mo 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
Jochem9mo 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
clevermissfox9mo 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
Want results from more Discord servers?
Add your server