wen*_*ner 6 html css html5 css3
在这里演示
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
size属性会影响显示和可见性,这会发生什么？
如何在select中隐藏具有size属性的选项？
见更新部分
我认为你不能只对所有浏览器使用 CSS，你需要一些 JS 代码，之前有一个非常相似的问题：
如何使用 CSS 在 <select> 菜单中隐藏 <option>？
在 Chrome (v. 30) 中，“display:none”不起作用，但是在 Firefox (v. 24) 中，它可以工作，带有“display:none”的选项不会出现在列表中。
更新2：
在当前的 Chrome (v. 70) 和 Firefox (v. 63) 版本中，在选项标签中使用带有“display:none”和属性“disabled”的 css 会从列表中删除该选项，并且它不会出现没有了。
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
感谢@achecopar 的帮助