Search code examples
htmlcsssafaripadding

input select box don't use a padding in Safari

I have a input select box and I have to align the text in this box. In Google Chrome, Firefox and IE <= 9 it works fine. But the Safari don't use the padding..

Here my code:

<select class="anrede1">
    <option>Frau</option>
    <option>Herr</option>
</select>

.anrede1, .land {
    font-family:'Roboto Condensed';
    font-size: 22px;
    color: #575656;
    margin: 10px 10px 10px 0px;
    width: 100%;
    height: 42px;
    text-align: left;
    padding-left: 17px;
    border: 2px solid #e1eef9;
    font-weight: 300;
}

http://jsfiddle.net/jhne7pfe/

Some ideas to fix that?

Solution

  • Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.

    -webkit-appearance: textfield;

    Using that solved my problem, hope this saves someone else time.