Remove Search Box Buttons in WebKit
I love all of the (relatively) new HTML5 INPUT
element types. If you aren't using them...what the hell is wrong with you?! please do. New types like search
and email
make these form fields infinitely more usable on mobile. What I don't necessarily like is how WebKit adds the circular x
button to the right of search boxes; they add a design element that was clashing with the site look and feel. After a quick search, I figured out how to remove it:
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; }
No more unwanted icon in my design. Big thanks to Chris Coyier for this tip!
I have been searching this for ages. But please note that in some cases the default style does help user.