2012-03-08 15 views
8

संभव डुप्लिकेट:पैडिंग सफारी में चुनिंदा टैग पर काम नहीं करता

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>2</option> 
</select> 

लेकिन अगर:
padding is not working in Safari and IE in select list

तो मैं तो जैसे एक बुनियादी चयन टैग है मैंने चुनिंदा टैग पर पैडिंग लगाई है, यह सफारी पर काम नहीं करती है:

select { 
    padding: 6px; 
} 

आईई 7 पर, मैं समझता हूं, लेकिन सफारी पर? क्या इस से निकाल पाने के लिए कोई तरीका है?

+0

देख http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – Luca

उत्तर

16

पहले यहाँ उत्तर दिया: https://stackoverflow.com/a/2967371/181002

वेबकिट select -items के लिए गद्दी अस्वीकृत करने के लिए अपने आप पर यह ले लिया है, लेकिन आप एक सरल 'हैक' का उपयोग करके एक ही प्रभाव को प्राप्त कर सकते हैं, करने के लिए line-height और text-indent लागू करने से मिलकर अपने वस्तु चुनें। http://jsfiddle.net/B858P/

+0

मैं चाहता हूँ:

यहाँ एक उदाहरण है अपने जेएसएफड उदाहरण को देखना पसंद है लेकिन मुझे लगता है कि लिंक टूटा हुआ है। – catandmouse

+0

हाँ, ऐसा लगता है कि जेएसफ़िल्ड नीचे है। यहां एक जेएसबीन समतुल्य है: http://jsbin.com/eleduj/2/edit चेतावनी दी जानी चाहिए, हालांकि यह हैक बहुत अधिक वेबकिट-अनन्य है, क्योंकि टेक्स्ट-इंडेंट फ़ायरफ़ॉक्स में बॉक्स के बाहर थोड़ा चुनिंदा आइकन भेजता है, और लाइन-ऊंचाई बस कुछ भी नहीं करता है, जिसका मतलब है कि आपको शायद क्रॉस ब्राउज़र काम करने के लिए सभी प्रकार के स्वच्छ सीएसएस हैक्स करने के लिए मजबूर होना पड़ेगा, और उस समय, आप शायद अपने कस्टम चयन बॉक्स को बंद करने से बेहतर हो : http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx –

+0

मैं बस सोच रहा हूं कि वेबकिट ब्राउज़र के लिए पैडिंग को अस्वीकार करने का कारण क्या है? वैसे भी, क्रोम में पैडिंग डिस्प्ले, समस्या केवल सफारी में होती है। मैं वैसे भी आपके समाधान का प्रयास करूंगा। – catandmouse