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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

  • By
    Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

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!