Disable default appearance of input elements in WebKit and iOS

If you’ve tried out any of HTML5’s new input types you’ll probably have noticed that WebKit adds its own default styling to search input fields. This can be a bit of a pain if you’re trying to achieve a particular layout, so you can remove them using the following CSS:

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

Similarly, if you’re browsing the web on an iOS device you’ll notice that it also applies its own appearance to input and textarea elements: rounded corners, grey gradient in the background, etc. This is an even simpler fix, however:

input, textarea {
	-webkit-appearance: none;
}

More on appearance can be found at the W3C editor’s draft.

Posted in CSS / Tags: CSS3, WebKit / Trackback / RSS 2.0