Square Search Boxes in WebKit
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:
-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
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...
One of the important functions of CSS is to position elements.
Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning.
By using the above spacing properties and the z-index "layering" property, we can...
One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...