in Web & Tech

Styling input type=”search”…

When you use a input of type search and try to style it via CSS you might go crazy upon all your fancy decoration not displaying properly. Even custom borders won’t, at least on webkit browsers.

It’s easy to fix by applying the appearance property on the selector matching your input field. This will destroy the browser’s default styling:

-moz-appearance: none;
-webkit-appearance: none;

Update: and the button to reset the form value can be removed, too:

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)

  • Related Content by Tag