Come dare stile all'opzione di un elemento html "select"?

Ecco il mio HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Voglio rendere il nome del prodotto (cioè 'Prodotto1', 'Prodotto2' , ecc) in grassetto, e le sue categorie (cioè Elettronica, Sport, ecc) in corsivo, utilizzando solo CSS. Ho trovato una vecchia domanda che diceva che non è possibile usando HTML e CSS, ma si spera che ora ci sia una soluzione.

TylerH
Domanda modificata 27º marzo 2019 в 2:05
Programmazione
html css drop-down-menu
26º agosto 2011 в 6:02
2 visualizzazioni
Soluzione

Ci sono solo pochi attributi di stile che possono essere applicati a un elemento ``.

Questo perché questo tipo di elemento è un esempio di "elemento sostituito". Sono dipendenti dal sistema operativo e non fanno parte dell'HTML/browser. Non può essere stilizzato tramite CSS.

Ci sono plug-in/librerie di sostituzione che assomigliano a un <select> ma sono in realtà composti da regolari elementi HTML che POTONO essere stilizzati.

Jacob
Risposta modificata 30º settembre 2019 в 9:58
Commentari (8)

No, non è possibile, poiché lo stile di questi elementi è gestito dal sistema operativo dell'utente. MSDN risponderà alla tua domanda qui:

Tranne che per background-color e color, le impostazioni di stile applicate attraverso l'oggetto style per l'elemento option sono ignorate.

georgeawg
Risposta modificata 2º novembre 2019 в 8:10
Commentari (6)

Come detto sopra, non è proprio possibile; tuttavia, se vuoi solo stilizzare lo stato iniziale per qualcosa come un 'Seleziona prodotto...' opzione prima che un utente interagisca con il campo, potresti fare qualcosa come sotto --

L'esempio sottostante stilizza (tecnicamente tutta) la prima opzione in rosso e una volta che un utente interagisce rimuoverà quell'opzione (che ha il valore="defaultValue" impostato) e rimuoverà la classe applicata alla select. È possibile applicare anche altre opzioni oltre al colore, ma queste avranno effetto solo sul campo una volta cambiato, non sulla vista elenco.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});
Victor Bjelkholm
Risposta modificata 27º aprile 2013 в 3:41
Commentari (0)