How to hide only one option element using css only

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 value four from the above code.

I tried using {display:none} for value-four but it didn't work.

Also want to add padding between this elements one, two, three and four.

P.S. I want to remove it using CSS only.

Answer 1

Attribute selector is the key, although as Musa points out, you can't hide a option in internet explorer.

Article here on hiding option 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>