Input field doesn't use padding in Safari

Question

I have an input selection box, and I need to align the text in this field. On Google Chrome, Firefox, and IE <= 9, it works fine. But Safari does not use padding.

Here is 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 this?

Answer 1

His late answer, but I have been looking 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 this problem, hope it saves time.

Answer 2

Not sure my last comment on the comment:

Since I don't have Safari installed, I hope this helps. Try using:

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

instead

 text-indent: 17px; 

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

Sorry, I don't have a jsfiddle account yet.

Will be done as soon as possible ;-)

Answer 3

As far as I know, the W3 specifications do not allow indentation in selected fields. Therefore, Safari does not support it.

But instead of padding-left you can use the following:

 text-indent:17px; 

This should work fine.