选择选项已禁用并已选中 - 仅 CSS答案

【问题标题】：Select option disabled and selected - only CSS选择选项已禁用并已选中 - 仅 CSS
【发布时间】：2020-03-20 13:14:04
【问题描述】：

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

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

<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

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

想好了吗？

【问题讨论】：

您想隐藏并在页面加载时显示其他人？
你不会下拉选项，否则禁用选择..！
您能否详细说明您要禁用哪个选项以及要隐藏哪个选项的问题？你的问题让我有点困惑。

标签： html css

【解决方案1】：

如果符合您的要求，试试这个

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

与直觉相反，这似乎在 Chrome 中有效。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：