<select> ऊंचाई के साथ एचटीएमएल तत्व

Question

क्या कोई एचटीएमएल चयन तत्व शैली बनाने के तरीके के बारे में जानता है ताकि इसकी एक निश्चित ऊंचाई हो और ब्राउज़रों में अच्छा लगे? मैंने बस सीएसएस में ऊंचाई निर्धारित करने की कोशिश की है लेकिन बॉक्स के अंदर का पाठ फ़ायरफ़ॉक्स में लंबवत ऑफ-सेंटर है।

<select style="height:1.8em;"> 

यह एक डुप्लिकेट प्रश्न नहीं है। दूसरा प्रश्न ड्रॉप-डाउन बॉक्स की ऊंचाई के बारे में पूछता है जो तब दिखाई देता है जब आप किसी चयनित तत्व पर क्लिक करते हैं। मेरा सवाल अनजान चयन तत्व की ऊंचाई के बारे में है।

Answer 1

मैं कुछ सीएसएस हैक्स इस्तेमाल किया और व्यक्तिगत रूप से क्रोम/सफारी/फ़ायरफ़ॉक्स/आईई लक्षित, प्रत्येक ब्राउज़र के रूप में renders थोड़ा अलग का चयन करता है। मैंने आईई को छोड़कर सभी ब्राउज़रों पर परीक्षण किया है।

सफारी/क्रोम के लिए, height सेट और line-height आप अपने <select /> के लिए चाहते हैं।

फ़ायरफ़ॉक्स के लिए, हम फ़ायरफ़ॉक्स के डिफ़ॉल्ट गद्दी और सीमा को मारने के लिए है, तो हमारे अपने सेट जा रहे हैं। जो भी आपको पसंद है उसे पैडिंग सेट करें।

आईई 8 के लिए, बस क्रोम की तरह, हम height और line-height गुण निर्धारित किया है। इन दो media queries संयुक्त किया जा सकता है। लेकिन मैंने डेमो उद्देश्यों के लिए इसे अलग रखा। तो आप देख सकते हैं कि मैं क्या कर रहा हूं।

कृपया ध्यान दें, height/line-height संपत्ति क्रोम/सफारी OSX में काम करने के लिए, आप एक कस्टम मान background सेट करना होगा। मैंने अपने उदाहरण में रंग बदल दिया।

यहाँ नीचे की एक jsFiddle है: http://jsfiddle.net/URgCB/4/

गैर हैक मार्ग के लिए, क्यों jQuery के माध्यम से एक कस्टम का चयन करें प्लग-इन का उपयोग नहीं? इस की जाँच करें:http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select> 
    <option>Here's one option</option> 
    <option>here's another option</option> 
</select> 

सीएसएस:

@media screen and (-webkit-min-device-pixel-ratio:0) { /*safari and chrome*/ 
    select { 
     height:30px; 
     line-height:30px; 
     background:#f4f4f4; 
    } 
} 
select::-moz-focus-inner { /*Remove button padding in FF*/ 
    border: 0; 
    padding: 0; 
} 
@-moz-document url-prefix() { /* targets Firefox only */ 
    select { 
     padding: 15px 0!important; 
    } 
}   
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */   
    select { 
     height:30px; 
     line-height:30px; 
    }  
} 

Answer 2

भी कर सकते हैं "केन्द्र" पाठ के साथ:

vertical-align: middle;