How to hide only one element of an element using only css

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> 

I want to hide only the value four of the above code.

I tried using {display: none} for a value of four, but that didn't work.

You also need to add indents between these elements one, two, three and four.

PS I want to remove it only with CSS.

Answer 1

The attribute selector is the key, although, as Musa points out, you cannot hide a parameter in Internet Explorer.

Article here about hiding options in IE Options with display: no one is 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

I took part, and Aaron already answered and added the requested addition:

 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> 

Answer 3

Try it, it can help.

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

Answer 4

You can do it:

CSS

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

DEMO HERE

Answer 5

Try the following:

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

Or you can do this to:

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