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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

  • By
    HTML5’s placeholder Attribute

    HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the...

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!