Padding-Left in Select Tag (dropdown) in CSS3

user_1222530 0
Viewed 7847

As far as I can tell, there's no solution for getting consistent padding-left within select boxes (dropdowns) across all modern browsers.

<select class="dropdown">
    <option>Planes</option>
    <option>Trains</option>
    <option>Automobiles</option>
</select>

The solution I've heard is to use text-indent, but that breaks entirely in Firefox, let alone is supported sporadically across other browsers. If you use a combination, you actually get completely different results across all major browsers.

.dropdown {
    padding-left: 10px;
    text-indent: 10px;
}

IE: only padding renders

Chrome: both render

Safari: only text-indent renders

Firefox: padding, with weird text-indent bug

Is there another way to resolve this issue? It seems like the best approach is to ditch text-indent and try and figure out a way to indent in Safari without it, since everything else can handle the padding just fine.

Relevant Fiddle: http://jsfiddle.net/s3Lrh/1/

css html jquery javascript
4 Answers

Here is the best thing that I have found to work:

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 10px;
}

At the time of writing, this works on Chrome, Safari, and Firefox.

user_63901520

The only way I made this work without using a select plugin is to add empty spaces before the text like this:

<option>&nbsp;&nbsp;&nbsp;Some Text Here</option>

This will have similar effect to padding-left

user_141434670
Related