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

Incredible Demos

  • By
    MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

  • By
    Firefox Marketplace Animated Buttons

    The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so...

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!