Square Search Boxes in WebKit
The new INPUT
type of search is a nice semantic addition given to us under the HTML5 label. Unfortunately this element isn't ultra-stylable within WebKit. Here's a quick trick I've found to make input[type=search]
elements look like their basic text counterparts:
input[type=search] {
-webkit-appearance: textfield;
}
Using -webkit-appearance: textfield
allows developers to use input[type=search]
elements that appear as a standard square INPUT
. This is especially useful when looking to add a border to your INPUT
element!
![How to Create a RetroPie on Raspberry Pi – Graphical Guide]()
Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices. While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![MooTools Zebra Tables Plugin]()
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.
The CSS
The above CSS is extremely basic.
![Create Snook-Style Navigation Using MooTools]()
Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.
The Images
These are the same...