Remove Search Box Buttons in WebKit

By  on  

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!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

Discussion

  1. I have been searching this for ages. But please note that in some cases the default style does help user.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!