Remove the “X” Icon From Search Inputs

CSSPosted on

The WebKit browsers (and IE) come with an additional “clear/cancel the field” icon (x) when the input is not empty.

It is a good, native UX feature, but sometimes we want to remove it usually because we want to create our custom solution.

In WebKit Based Browsers

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

In Internet Explorer

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

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

As you see, we have to use vendor-specific pseudo-elements for the customization or removal.

References

 

Need a web developer? Maybe we can help, get in touch!

Similar Posts

More content in CSS category