Come modificare lo stile di una casella di selezione 'etichetta gruppo opt

Question

Ho una semplice casella di selezione con un gruppo di opzioni nella mia applicazione.

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
</optgroup> 
    ---- 
    ---- 
    ---- 
</select> 

Quando viene visualizzato nel browser, l'etichetta di gruppo di opzioni è visualizzata con grassetto e corsivo; Voglio che venga visualizzato senza nessuno di questi stili.

Answer 1

Purtroppo le caselle di selezione sono una delle poche cose a cui è possibile aggiungere uno stile molto piccolo con i CSS. Di solito sei limitato a come il browser lo rende.

Per esempio, sembra che questo in cromo:

E questo in Firefox:

Answer 2

È possibile lo stile di una casella di selezione utilizzando solo i CSS, richiede un tipo di lavoro in giro:

Per prima cosa, lo circondi con un div e dai una classe:

<div class="selectStyle"> 
    <select> 
     <option>First Option</option> 
     <option>Second Option</option> 
    </select> 
</div> 

Poi assicurarsi che gli elementi di selezione sono in stile un certo modo usando i CSS:

.selectStyle select { 
    background: transparent; 
    width: 250px; 
    padding: 4px; 
    font-size: 1em; 
    border: 1px solid #ddd; 
    height: 25px; 
} 

E tu stile del div:

.selectStyle { 
    width: 235px; 
    height: 25px; 
    overflow: hidden; 
    background: url(yourArrow.png) no-repeat right #ccc; 
} 

Answer 3

Sulla maggior parte dei browser (testato su più di IE e FF), puoi facilmente cambiare l'etichetta dell'optgroup solo con CSS:

select optgroup{ 
    background:#000; 
    color:#fff; 
    font-style:normal; 
    font-weight:normal; 
    } 

Ovviamente, è possibile impostare qualsiasi nome di classe anziché il tag html selezionato.

A proposito, come altre risposte hanno detto, ci sono ancora alcune opzioni CSS da usare con le caselle selezionate e molti webmaster le sovrascrivono usando il metodo fornito dall'utente949847. Ma questo codice dovrebbe essere sufficiente per soddisfare le tue esigenze.

Answer 4

Firefox stile l'etichetta con questa regola:

optgroup:before { 
    content: attr(label); 
    display: block; 
} 

È possibile eseguire l'override di esso.

Answer 5

Per un approccio diverso per eludere i problemi con gli optgroup di stile, suggerisco di utilizzare le opzioni disabilitate.

<option disabled>[group label]</option> 

si può avere un tiro in styling via ad es.

<style> [disabled] { color:#000; background-color:#CCC } </style>