Voglio dare il colore giallo agli elementi selezionati nella casella di riepilogo a discesa multiselect. Di default ha uno sfondo grigio dopo aver selezionato, Voglio farlo in HTML, CSS.come cambiare il colore di sfondo degli oggetti selezionati nella casella a discesa multiselect?
Qualcuno può aiutare in questo?
Possiamo usare JS per selezionare i DOM.
$('select').change(function() {
$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');
}).change()
<select>
<option>1111111</option>
<option>222222222</option>
<option>33333333</option>
<option>44444444</option>
</select>
Non è possibile. L'elemento <option> non accetta lo stile CSS.
È possibile utilizzare un'alternativa basata su JavaScript. Sono disponibili molti script di sostituzione
<select>.
Non è vero al 100% ho paura ... i moderni browser permettono questo. Provalo in FireFox;) tuttavia non è affidabile nel cross browser. – Pebbl
Grazie a @Diodeus, puoi aiutarmi con lo stile Javascript come indicato di seguito. ** selezionato {/ * Colore del testo e peso del carattere, rosso e grassetto */ colore: blu; tipo di carattere: grassetto; } ** – user9371102
JavaScript non può farlo con un elemento di selezione standard. Vedi: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx –
Di seguito dovrebbe funzionare (per i browser che permettono tag opzione styling), tuttavia lo stile di selezione di default avrà la precedenza nella maggior parte dei casi. Si può essere in grado di trovare un modo per disattivare questo però:
css
select option.selected {
font-weight: bold;
color: red;
}
javascript
function highlight_options(field){
var i,c;
for(i in field.options){
(c=field.options[i]).className=c.selected?'selected':'';
}
}
markup
<select onchange="highlight_options(this)" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
Grazie a @pebbl, il colore di sistema è prioritario, http: // jsfiddle.net/rZuYz/ – user9371102
@VicKyAmr Sì, purtroppo come ho detto. a quanto sembra non puoi rimuovere questo ... almeno per quello che ho trovato. Tutto perché l'evidenziazione non è una proprietà dell'elemento opzione, è un livello in alto. Tuttavia, puoi comunque influenzare gli stili che non vengono sovrascritti però ... come il bordo e il padding. E puoi anche applicare stili e immagini di sfondo alle opzioni non selezionate per renderle più accattivanti. – Pebbl
Questo non funziona in FF :( – t1gor
Pure CSS aiuterebbe qui:
option:checked
<style>
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
color: lightgray;
}
</style>
Aggiungi il tuo stile all'interno del blocco.
Possiamo semplicemente fare con l'aiuto del seguente css.
select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }
Non funziona con più selezioni :( – t1gor
Questo non ha funzionato per i multi-selects anche per me. –