Style selezionare il menu

Question

E 'possibile Style a Selezionare> Menu < come questa immagine:

Ecco un violino che ho lavorato su, ma non riesco a ottenere la freccia corretta.

http://jsfiddle.net/nmpxj/

Ecco il codice HTML:

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

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

E 'possibile per lo stile un < selezionare> Menu come questo?

Answer 1

Il modo che dovete fare è fondamentalmente galleggiare entrambi sinistra e di cancellare i loro giusti come segue

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

Questo spingerà chiuderle insieme. Inoltre, non utilizzare il tag <p> accanto alla casella di selezione. Metti la freccia dentro un div invece non ci sono ragioni per non farlo e rimuoverà lo spazio quando li farai galleggiare. È solo un codice più pulito per farlo in questo modo.

Answer 2

È possibile aggiungere questo alla tua CSS:

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

Questo dovrebbe fare il trucco.

Demo: Select Demo