Browser (Webkit, IE, Firefox) Cambia sfondo per selezionare

Question

Ho cercato di eliminare lo sfondo sfumato predefinito nel sito web. So che se imposto il -webkit-appereance: nessuno sarebbe possibile, ma poi perderò le frecce e altri comportamenti nel menu a discesa che desidero. C'è comunque lo sfondo bianco con l'aspetto -webkit: menulista?

Questo è quello che ho, ma lo sfondo non cambia

.ius select{ 
    -webkit-appearance: menulist; 
    -moz-appearance: menulist; 
    appearance: menulist; 
    height:32px; 
    border:1px solid #c8c8c8; 
    width:250px; 
    background:rgba(255, 255, 255, 0); 
    background: transparent; 
} 

Answer 1

La proprietà aspetto è generalmente utilizzato per due cose:

1. imitando lo stile nativo di altri elementi
2. o la rimozione tutto lo stile nativo (impostazione aspetto a nessuno)

È una proprietà piuttosto strana.

Poiché si desidera rimuovere lo sfondo predefinito nativo, è necessario impostare l'aspetto su Nessuno. Ciò rimuoverà lo stile a (i gradienti e le icone freccia predefinite). Questo non è un grosso problema, dal momento che puoi semplicemente usare CSS per applicare più stile.

Con la marcatura:

<select id="menulist"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 

e CSS:

#menulist { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height:20px; 
    border:1px solid rgb(156,156,156); 
    width:250px; 
    text-indent: 8px; 
    /** 
    * replace this background url with a proper arrow asset 
    **/ 
    background: url('http://placehold.it/5x10') no-repeat 95% 50%; 
} 

Il jsfiddle completo è disponibile qui: http://jsfiddle.net/gwwar/vR53Q/2/

Dal momento che questa proprietà è supportata solo su Chrome, Safari e Firefox, Probabilmente andrei su un percorso diverso e userei lo stile di selezione nativo o userei un componente a tendina su cui hai il pieno controllo.