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!
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![CSS content and attr]()
CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily. There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content. You saw a...
![Disable Autocomplete, Autocapitalize, and Autocorrect]()
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
