Remove the Search Input Clear(x) Icon

By  on  

I really appreciate the amount of different <input> elements we've received over the past decade. These elements don't just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear) icon in <input type="search" /> elements.

In most cases that input is nice, but if you're looking to really customize your search experience, you may want to get it out of the way:

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

With the snippet above, the cancelation icon disappears, as does the special highlight decoration!

Recent Features

Incredible Demos

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

  • By
    RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power.  One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP:  Request.Stocks.  Created by Enrique Erne, this great MooTools class acts as...

Discussion

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