Domanda Come si disegna la con solo CSS?


Nota: questa domanda non riguarda la creazione di un menu a discesa personalizzato. Si tratta solo di possibilità di stile <option> elementi all'interno dell'elemento select in CSS

Come posso stile <option>s di a <select> elemento con compatibilità cross-browser? Conosco molti metodi JavaScript che personalizzano il menu a discesa in cui convertire <li>, di cui non sto chiedendo nulla.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Sto chiedendo cosa potrebbe essere possibile solo con i CSS, con compatibilità per IE9 +, Firefox e Chrome.

enter image description here

Voglio stile in questo modo o il più vicino possibile.

enter image description here

Ci ho provato http://jsfiddle.net/jitendravyas/juwz3/3/, ma Chrome non mostra alcuno stile tranne il colore del carattere, mentre Firefox ne mostra altri. Come ottenere bordi e imbottiture anche in Chrome?


96
2017-12-08 11:27


origine


risposte:


EDIT 2015 maggio

Disclaimer: ho preso lo snippet dalla risposta collegata qui sotto:

Aggiornamento importante!

Oltre a WebKit, a partire da Firefox 35 saremo in grado di usare il appearance proprietà:

utilizzando -moz-appearance con il none valore su una casella combinata ora rimuovere il   pulsante a discesa

Quindi ora per nascondere lo stile predefinito, è facile come aggiungere le seguenti regole sul nostro elemento select:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Per il supporto di IE 11, puoi usare [::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Vecchia risposta

Sfortunatamente ciò che chiedi non è possibile usando puro CSS. Tuttavia, ecco qualcosa di simile che puoi scegliere come soluzione. Controlla il codice live qui sotto.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

MODIFICARE

Ecco la domanda che hai chiesto qualche tempo fa. Come stile un dropdown <select> con CSS solo senza JavaScript? Come dice lì, solo in Chrome e in una certa misura in Firefox puoi ottenere ciò che desideri. Altrimenti, sfortunatamente, non esiste una cross CSS pura per lo styling di una selezione.


67
2017-12-08 12:36



Non esiste un modo cross-browser per gli elementi delle opzioni di stile, certamente non nella misura del secondo screenshot. Potresti essere in grado di renderli in grassetto e impostare la dimensione del carattere, ma sarà proprio così ...


4
2017-12-08 12:19



Ho giocato con elementi selezionati prima e senza sovrascrivere la funzionalità con JavaScript, non penso sia possibile in Chrome. Sia che utilizzi un plug-in o che tu scriva il tuo codice, il CSS è un no-go per Chrome / Safari e come hai detto, Firefox è più abile nel gestirlo.


2
2017-12-08 12:17