ड्रॉपडाउन सूची की चौड़ाई कैसे बदल सकता है?

Question

मेरे पास एक सूची बॉक्स है और मैं इसकी चौड़ाई कम करना चाहता हूं।

<select name="wgtmsr" id="wgtmsr" style="width: 50px;"> 
    <option value="kg">Kg</option> 
    <option value="gm">Gm</option> 
    <option value="pound">Pound</option> 
    <option value="MetricTon">Metric ton</option> 
    <option value="litre">Litre</option> 
    <option value="ounce">Ounce</option> 
</select> 

इस कोड को मोज़िला फ़ायरफ़ॉक्स (नवीनतम संस्करण) में IE 6 पर काम करता है, लेकिन नहीं:

यहाँ मेरी कोड है। क्या कोई मुझे बता सकता है कि मैं फ़ायरफ़ॉक्स पर ड्रॉपडाउन सूची के width को कैसे कम कर सकता हूं?

Answer 1

इस कोड का प्रयास करें:

<select name="wgtmsr" id="wgtmsr"> 
<option value="kg">Kg</option> 
<option value="gm">Gm</option> 
<option value="pound">Pound</option> 
<option value="MetricTon">Metric ton</option> 
<option value="litre">Litre</option> 
<option value="ounce">Ounce</option> 
</select> 

सीएसएस:

#wgtmsr{ 
width:150px; 
} 

आप विकल्प है कि आप अपने सीएसएस में यह कर सकते हैं की चौड़ाई बदलना चाहते हैं: शायद

#wgtmsr option{ 
    width:150px; 
} 

आपके सीएसएस नियमों में एक संघर्ष है जो आपके चयन

की चौड़ाई को ओवरराइड करता है

DEMO

Answer 2

एक सीएसएस बनाएँ और सीएसएस कोड में मूल्य style="width:50px;" सेट करें। ड्रॉप डाउन सूची में सीएसएस की कक्षा पर कॉल करें। फिर यह काम करेगा।

Answer 3

यकीन है कि सीएसएस किसी अन्य शैलियों आपके द्वारा निर्दिष्ट के साथ परस्पर विरोधी नहीं है बनाने के लिए !important तर्क का प्रयास करें। अपनी खुद की शैलियों को जोड़ने से पहले reset.css का भी उपयोग करना अच्छा है।

select#wgmstr { 
    max-width: 50px; 
    min-width: 50px; 
    width: 50px !important; 
} 

या

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;"> 

Answer 4

आप सूची है कि नीचे चला जाता है की चौड़ाई को नियंत्रित करना चाहते हैं, तो आप यह इस प्रकार कर सकते हैं।

सीएसएस

#wgtmsr option { 
    width: 50px; 
} 

Answer 5

लटकती-चौड़ाई में ही सेट नहीं किया जा सकता है। यह चौड़ाई विकल्प-मूल्यों पर निर्भर करती है। यहाँ (jsfiddle.net/LgS3C/) यह भी देखें

आप अपनी खुद की नियंत्रण का निर्माण या की तरह http://ivaynberg.github.com/select2/

कैसे करें बॉक्स लगता है कि आपके ब्राउज़र पर निर्भर करता है कुछ का उपयोग कर सकते हैं।