Square Search Boxes in WebKit

Written by David Walsh on November 5, 2012

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!

Comments

There are no comments yet — be the first!

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
CSS Transforms
Newer
Camera and Video Control with HTML5