thumb The new HTML5 form input types save me tons of work on form validation, and they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). It works great, but unfortunately, the Safari and Chrome browsers uses their own default stylsheet for this inputs, and so you can’t style (add a CSS properties) the search input yourself. I didn’t need this in-browser style for my search input, because I want to add my own CSS properties to searc input, so after some searching, I discovered the below solution.



To remove the default styling and allow your CSS properties to work you need to change the -webkit-appearance property. Add this rule to your stylesheet:

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

Or, if the input have a class name, you can use it (for class="search"):

.search {
    -webkit-appearance: none;
}

Also you can force Safari and Chrome to treat your search input like a typical text field input by this:

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

Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: