Jak ukryć tylko jeden element opcji za pomocą css tylko

Question

<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> 

Chcę ukryć tylko wartość cztery z powyższego kodu.

Próbowałem użyć {display: none} dla wartości-cztery, ale to nie zadziałało.

Również dodać dopełnienie między this elements jeden, dwa, trzy i cztery.

P.S. Chcę go usunąć tylko za pomocą CSS.

Answer 1

Selektor atrybutu jest kluczem, chociaż, jak wskazuje Musa, nie można ukryć opcji w eksploratorze internetowym.

artykuł tutaj na ukrycie opcji w 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>

Answer 2

Spróbuj tego, może pomóc

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

Answer 3

Spróbuj:

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

Albo można to zrobić:

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

Answer 4

Można to zrobić:

CSS

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

DEMO HERE

Answer 5

wziąłem udział Aaron już odpowiedział dodano żądane dopełnienie:

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>