Style wybierz menu

Question

Czy można projektować menu < select> tak jak na poniższym rysunku:

Oto skrzypce że pracuję na ale nie może dostać strzałka poprawne.

http://jsfiddle.net/nmpxj/

Oto HTML:

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

Oto CSS:

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; 
} 

Czy to możliwe, aby Stylu A < wybierz> menu w taki sposób?

Answer 1

Sposób, co musisz zrobić, to jest w zasadzie unosić je zarówno w lewo i usunąć swoje prawo w następujący sposób

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

To wcisnąć je blisko siebie. Ponadto nie powinieneś używać znacznika <p> obok pola wyboru. Umieść strzałkę wewnątrz div zamiast tego, nie ma powodu, aby tego nie robić i usunie to miejsce, gdy je również uaktywnisz. To po prostu czystsze kodowanie, aby zrobić to w ten sposób.

Answer 2

Możesz dodać to do Twojego CSS:

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

To powinno załatwić sprawę.

Demo: Select Demo