Come nascondere solo un elemento opzione usando solo css

<select class="Select-input"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
    <option value="four">Four</option> 
</select>

Voglio nascondere solo il valore quattro dal codice precedente.Come nascondere solo un elemento opzione usando solo css

Ho provato ad utilizzare {display: none} per il valore-quattro, ma non ha funzionato.

vogliono anche aggiungere imbottitura tra this elements uno, due, tre e quattro.

P.S. Voglio rimuoverlo usando solo i CSS.

fonte

2015-12-16 Siren Brown

Purtroppo sembra che tutti i nostri più grandi browser non saranno d'accordo su come questo dovrebbe essere gestito. FF e Chrome accetteranno il display: nessuno e lo gestiranno correttamente, mentre IE, Edge e Safari lo ignoreranno. Dopo la mia ricerca questo è quello che ho trovato: https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css –

Il selettore di attributi è la chiave, sebbene come Musa sottolinea, non è possibile nascondere un'opzione in Internet Explorer.

articolo qui a nascondere opzione in IE Options with display:none not hidden in IE

.Select-input option[value=four] {display: none;}

<select class="Select-input"> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
    <option value="four">Four</option> 
 
</select>

fonte

2015-12-16 16:23:40 Aaron

Sai, che non funzionerà in IE – Musa

@Aaron che la nuova soluzione non funziona in IE o – Danield

Non è quello che intendevo, tu ** non puoi ** nascondere le opzioni in IE – Musa

Prova questo, può aiutare

select option:last-child {display:none;}

fonte

2015-12-16 16:24:06

Prova questa:

.Select-input option:nth-of-type(2) { 
    display:none; 
}

Oppure si può fare questo a:

.Select-input option:nth-child(1){ 
    display: none; 
}

fonte

2015-12-16 16:25:13

Si può fare questo:

CSS

.Select-input option:nth-child(4){ 
    display: none; 
}

DEMO HERE

fonte

2015-12-16 16:26:18

Funziona qui in DEMO ma non nel sito reale. Penso che Chrome non lo consenta. –

ho preso la parte di Aaron già risposto e aggiunto il padding richiesto:

option {padding: 7px 0px 7px 5px;} 
 

 
option[value=four] {display: none;}

<select class="Select-input"> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
    <option value="four">Four</option> 
 
</select>

fonte

2015-12-16 16:33:41 Chaphasilor

Come nascondere solo un elemento opzione usando solo css

risposta

Problemi correlati