शैली चयन मेनू

Question

यह निम्न छवि की तरह एक < चयन> मेनू शैली करना संभव है:

यहाँ एक बेला है कि मैं पर काम कर रहा है, लेकिन तीर सही नहीं मिल सकता है।

http://jsfiddle.net/nmpxj/

यहाँ HTML है:

select { 
background: -webkit-linear-gradient(#C9C9C9, #CCC); 
background: -moz-linear-gradient(#C9C9C9, #CCC); 
border: 1px solid #ccc; 
color: white; 
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);  
-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
padding:10px; 
} 

वह इस तरह का < चयन शैली> मेनू संभव है:

<select> 
    <option>Alabama</option> 
    <option>Alaska</option> 
</select> 

यहाँ सीएसएस है?

Answer 1

जिस तरह से आप यह करने के लिए मूल रूप से उन्हें नाव दोनों को छोड़ दिया और अपने अधिकार के स्पष्ट है के रूप में

select { float:left; clear:right; } 
div { float:left; clear:right; } 

इस प्रकार की जरूरत है इससे उन्हें धक्का होगा एक साथ बंद कर दें। इसके अलावा आपको चयन बॉक्स के बगल में <p> टैग का उपयोग नहीं करना चाहिए। तीर को एक div के अंदर रखें, इसके बजाय कोई कारण नहीं है और जब आप उन्हें फ़्लोट करते हैं तो यह स्थान को हटा देगा। यह इस तरह से करने के लिए सिर्फ क्लीनर कोडिंग है।

Answer 2

आप अपने सीएसएस करने के लिए इस जोड़ सकते हैं:

width: auto; 
background: url('http://cdn1.iconfinder.com/data/icons/picol/icons/arrow_sans_down_32.png') no-repeat right; 

कि चाल करना चाहिए।

डेमो: Select Demo