如何仅使用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>

我只想隐藏上面代码中的值4。

我尝试使用{display:none}作为value-4，但它不起作用。

我还想在this elements一、二、三和四之间添加填充。

附言:我只想使用CSS删除它。

Answer 1

属性选择器是关键，尽管如穆萨所指出的，你不能在internet explorer中隐藏选项。

此处有关在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

我接受了Aaron已经回答的部分，并添加了请求的填充：

​

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

您可以这样做：

CSS

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