Geek Answers Handbook

How can I get rid of horizontal padding or indentation in html5 search inputs in webkit on mac?

In webkit only on mac, text in the search input is indented to the left. Here is a demo . Even after removing all indentation, indentation of the text, and setting -webkit-appearance to textfield or none text is still indented. It looks like about 10 pixels or so, but the inspector does not show any CSS rules (even the default for the browser) that seem to apply this style. Any ideas?

 <input type="search" value="Search"> -webkit-appearance: textfield; border: 1px solid #ccc; padding: 0; margin: 0; text-indent: 0;
+4
source share
2 answers

Here's how you actually reset the default style in WebKit:

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

After that, the filling problem should disappear. If you also want to normalize the cancel button, which is not found in browsers other than WebKit, add input[type="search"]::-webkit-search-cancel-button as a selector for the second rule.

+19
source

By default, WebKit-based browsers use the border field model to enter [type = "search"]. And if you use the traditional box size (you, if you have not yet announced any other model), you may come across strange additions and border behavior. Fix:

 input[type="search"] { box-sizing: content-box; }

As for -webkit-appearance - try textarea ( textfield ) and none . In any case, check your page on your iOS device to be sure that the style will not differ after the input field is in focus (strange behavior, there may be a mistake - I use iPhone 4S with a margin of iOS 6.0)

+2
source

More articles:


All Articles