Come modellare l '<opzione> con solo CSS?


102

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

Come posso definire lo stile <option>di un <select>elemento con compatibilità cross-browser? Conosco molti modi 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>

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

inserisci qui la descrizione dell'immagine

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

inserisci qui la descrizione dell'immagine

Ho provato qui http://jsfiddle.net/jitendravyas/juwz3/3/ , ma Chrome non mostra alcuno stile tranne il colore del carattere, mentre Firefox ne mostra altri. Come far funzionare il bordo e il riempimento anche in Chrome?


@ManseUK - Si tratta solo di <option>non l'intero menu a discesa
Jitendra Vyas

2
@ ManeUK: Non sono sicuro che sia lo stesso. Questa domanda chiede se puoi <select>modellare l'aspetto dell'elemento sulla pagina. Questa domanda chiede se puoi modellare l'elenco di <option>elementi.
Andy E

13
Per l'amor di Dio questo NON è un duplicato di NESSUNA delle due domande collegate (che tra l'altro sono diverse l'una dall'altra). Uno riguarda esclusivamente lo stile della selezione e non dell'opzione, mentre questo chiede anche dello stile delle opzioni, e l'altro non ha l'unico requisito-css / no-js.
matteo

12
Sono stufo di vedere le domande erroneamente contrassegnate come duplicate, o erroneamente chiuse, che rimangono tali per anni nonostante siano state smentite.
matteo

Risposte:


70

EDIT 2015 maggio

Dichiarazione di non responsabilità: ho preso lo snippet dalla risposta collegata di seguito:

Aggiornamento importante!

Oltre a WebKit, a partire da Firefox 35 saremo in grado di utilizzare la appearanceproprietà:

Usando -moz-appearancecon il nonevalore su una casella combinata ora rimuovi il pulsante a discesa

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

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

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

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

Vecchia risposta

Sfortunatamente quello che chiedi non è possibile utilizzando CSS puro. Tuttavia, ecco qualcosa di simile che puoi scegliere come soluzione. Controlla il codice live di seguito.

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 posto tempo fa. Come applicare uno stile a un menu a discesa <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 soluzione CSS pura cross browser per lo styling di una selezione.


3
+1 grazie è un buon codice. ma nel mio caso voglio fare con <select>. l'uso di non <div>è semanticamente corretto.
Jitendra Vyas

2
@ JitendraVyas, lo so, ma come ho risposto, non è possibile. Quello che hai ottenuto nella prima immagine è il massimo che puoi fare. Vedi la modifica. A proposito, ho risposto anche alla tua domanda precedente, per favore leggila.
Savas Vedova

La parte "aggiornamento importante" deduce che è possibile applicare uno stile ai optiontag con css, ma non è possibile, è possibile solo applicare uno stile al selecttag. Che è mostrato in questa risposta
svnm

Ecco una versione JavaScript dell'esempio precedente che aggiunge callback e alcune altre utili funzioni: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs

4

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


2

Ho già giocato con elementi selezionati e senza sovrascrivere la funzionalità con JavaScript, non credo sia possibile in Chrome. Sia che utilizzi un plug-in o scrivi il tuo codice, solo CSS è un no go per Chrome / Safari e come hai detto, Firefox è più bravo a gestirlo.


Rimuovere l'ultimo paragrafo: l'URL non è accessibile online.
kumarharsh
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.