如何仅使用CSS隐藏一个选项元素 [英] How to hide only one option element using css only

问题描述

 < select class =Select-input> 
< option value =one>一个< / option> 
< option value =two>两个< / option> 
< option value =three>三< / option> 
< option value =four>四个< / option> 
< / select> 
  

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

我尝试使用{display：none}作为值四，但它不起作用。

还想在这些元素一，二，三和四。

PS我只想用CSS去除它。

解决方案

属性选择器是关键，尽管Musa指出，隐藏一个在IE浏览器中的选项。

这篇文章隐藏在IE浏览器选项带显示的选项：none在IE中不隐藏

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

 < select class =Select-input> < option value =one>一个< / option> < option value =two>两个< / option> < option value =three>三< / option> < option value =four>四个< / option> < / select>  

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

解决方案

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>

这篇关于如何仅使用CSS隐藏一个选项元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！