Question

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

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

<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

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

是吗？

Answer 1

如果看起来像您的要求，请尝试

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

Answer 2

从直觉上讲，这似乎可以在Chrome中使用。

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

Answer 3

如果要自定义焦点选项。试试这个。

select:focus option{
    background-color: red;
}

Answer 4

我知道这个问题有点老了，但是当我今天尝试类似的尝试时，我就遇到了这个问题。如果要对预选选项和实际选项应用不同的样式，并且又不想在下拉菜单中显示预选，请尝试以下操作：

select:invalid {
  color: #BDBDBD;
}     
select option {
  color: #4c4643;
}

<select required="">
  <option value="" disabled="" selected="" hidden="">Select please</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

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

4 个答案: