input select box don't use a padding in Safari

Question

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?

Answer 1

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.

Answer 2

Not sure, if my last comment reply came through:

As I don't have a Safari installed here, I hope this helps. Try to use:

padding-left:17px; 
-webkit-padding-start:17px;

instead of

text-indent: 17px;

The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.

Unfortunately I also have no jsfiddle account yet.

Will be done as soon as possible ;-)