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.
Ci sono solo pochi attributi di stile che possono essere applicati a un elemento <option>
.
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.
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.
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');
});