2012-02-16 8 views
6

Ho cercato in giro un sacco e vedere persone che suggeriscono che:Posso colorare gli sfondi degli elementi selezionati in HTML selezionare solo le opzioni con CSS?

::-moz-selection {background: red;} 
::selection {background: red; } 

..works per colorare lo sfondo degli elementi correntemente selezionati in un multiplo selezionare la voce modulo. (Nota: intendo gli oggetti selezionati, non gli oggetti con focus).

Non riesco a farlo funzionare. Sto sbagliando?

#dropdowns select::selection { 
    background: red; 
} 

Acclamazioni:/

Setup: utilizzando Chrome per Mac

+0

analogo: http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-select-elements – BoltClock

risposta

23

Invece di impostare solo un background-color è anche possibile impostare un lineare gradiente come sfondo:

option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

Questo funziona in IE11 e ultima Chrome e Firefox. Safari lo ignora semplicemente. Non ho testato IE/Edge.

Se si desidera impostare il colore di sfondo solo per concentrato multi-seleziona è possibile utilizzare questo frammento:

select[multiple]:focus option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

vedere il pieno demo qui: http://codepen.io/marceltschopp/pen/PNyqKp

+2

Ritengo che questa dovrebbe essere la risposta selezionata. –

+0

Quindi a quanto pare è possibile solo sostituire il colore di evidenziazione predefinito con un'immagine e non un colore diverso? Ha senso ... – BoltClock

+1

Funziona su Microsoft Edge. "IE/Edge" di solito si riferisce alla modalità Edge su IE11, che è la stessa di IE11. Se vuoi parlare del nuovo browser, chiamalo "Microsoft Edge" o "Edge" ma non chiamarlo IE. Non è IE. – BoltClock

2

::selection non si applica alle opzioni selezionate; si applica al testo evidenziato. O stai interpretando erroneamente i loro suggerimenti, o quello che hanno detto è completamente sbagliato.

Secondo this answer, si suppone essere in grado di utilizzare per lo styling option:checked gli elementi selezionati:

#dropdowns option:checked { 
    background: red; 
} 

Ma io non sono stato in grado di farlo funzionare per <select> o <select multiple> elementi in this test fiddle .

+0

Ciao, grazie hai modificato prima che avessi la possibilità di dirti che non ha funzionato :) - wierd! Grazie per il violino.Vedo che [selezionato] funziona se ti vedi modificato qui: http://jsfiddle.net/vzDvK/1/ - Risultati strani però, puoi dare un'occhiata per favore? –

+2

@Mere sviluppo: puoi usare '[selezionato]' invece di ': checked', ma si applica solo a tutte le opzioni selezionate al momento del caricamento della pagina (poiché si tratta di un selettore di attributo). Se cambi la selezione, gli stili non si aggiorneranno. – BoltClock

+0

Ok, grazie per esserti attenuto a questo! quindi stiamo dicendo che: spuntato non funziona per alcune opzioni (facendo riferimento al jsfiddle originale)? Pensi che sia un bug? –

0

Il selettore CSS giusto per te sarebbe :checked

:: selezione è solo per il testo che è stato messo in evidenza:

+0

Grazie per il collegamento ai documenti, sembra che: il segno di spunta non funziona come previsto, commenterò sopra in un minuto. Saluti! –

0

ho trovato questo perché ho avuto la stesso problema, ho trovato una soluzione strana che sembra funzionare almeno con Chrome e forse altri. La soluzione era usare un selettore di attributi. Questo sembrava funzionare con il cromo, l'ho provato nel js fiddle. Una nota a margine che la scatola non ha cambiato immediatamente colore in rosso, ma una volta selezionata un'altra opzione, ho potuto vedere chiaramente che era effettivamente diventata rossa. Puoi verificarlo nel jsfiddle elencato sopra.

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] { 
    background: red; 
}