इनपुट चयन बॉक्स सफारी

Question

में पैडिंग का उपयोग न करें मेरे पास एक इनपुट चयन बॉक्स है और मुझे इस बॉक्स में टेक्स्ट को संरेखित करना होगा। Google क्रोम में, फ़ायरफ़ॉक्स और आईई < = 9 यह ठीक काम करता है। लेकिन सफारी गद्दी का उपयोग नहीं करते ..

यहाँ मेरी कोड:

<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/

कुछ विचार है कि ठीक करने के लिए?

Answer 1

यह एक देर से उत्तर के रूप में किया जाएगा, लेकिन मैं थोड़ी देर के लिए एक ही समस्या के समाधान के लिए खोज रहा था। टेक्स्ट इंडेंट का उपयोग करके इनपुट तत्व के चारों ओर तत्वों को स्थानांतरित कर दिया गया और पैडिंग अभी भी अनदेखा कर दिया गया था।

-webkit-appearance: textfield; 

मेरी समस्या का हल करने का उपयोग करके, उम्मीद है कि यह किसी और समय बचाएगा।

Answer 2

जहां तक ​​मुझे पता है कि डब्ल्यू 3 चश्मा चुनिंदा क्षेत्रों में पैडिंग का उपयोग करने की अनुमति नहीं देते हैं। तो सफारी इसका समर्थन नहीं करता है।

लेकिन आप padding-left के बजाय निम्न का उपयोग कर सकते हैं:

text-indent:17px; 

यह ठीक काम करना चाहिए।

Answer 3

सुनिश्चित नहीं हैं कि, अगर मेरा आखिरी टिप्पणी जबाब माध्यम से आया था:

जैसा कि मैंने एक सफारी यहां स्थापित नहीं है, मुझे आशा है कि इस मदद करता है। उपयोग करने के लिए प्रयास करें:

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

बजाय

text-indent: 17px; 

-webkit-padding-start का केवल क्रोम और सफारी ब्राउज़र के लिए है और स्वचालित रूप से अनदेखा किया जाना चाहिए अगर padding-left काम करता है।

दुर्भाग्य से मेरे पास अभी तक कोई jsfiddle खाता नहीं है।

जितनी जल्दी हो सके ;-)