Remove the Search Input Clear(x) Icon
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!
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![Facebook Sliders With Mootools and CSS]()
One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...
![iPad Detection Using JavaScript or PHP]()
The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...
