时间戳

首页 > 解决方案 > 选择选项已禁用并已选中 - 仅 CSS

html - 选择选项已禁用并已选中 - 仅 CSS

问题描述

我在禁用选择选项但自动选择时遇到了一些麻烦。

我想在加载页面时在选择中显示默认值，所以我使用以下代码：

<select>
  <option disabled selected>Select your item</option>
  <option>item</option>
  <option>item</option>
</select>

但是当用户打开选择列表时，我想隐藏选项或对选项进行样式化，但我不知道如何在我的 CSS 中获取它。或者，如果我尝试隐藏它在 IE 中不起作用的选项（最小 ie11）。

我试图得到它

select option[disabled]:selected
select option[disabled]:focus 
etc

但暂时没有结果，禁用的选定选项仍然具有默认行为，只有当我悬停其他项目时才能看到我的更改。

意？

标签： htmlcss

解决方案

如果看起来像你的要求，试试这个

<select>
  <option hidden>Select your item</option>
  <option>item</option>
  <option>item</option>
</select>

推荐阅读