禁用时如何为选择占位符提供样式？答案

【问题标题】：How do I give styling to select placeholder when it is disabled?禁用时如何为选择占位符提供样式？
【发布时间】：2020-09-17 11:37:23
【问题描述】：

我有一个要求在我的项目中给出特定类型的样式，默认情况下。选择标记的占位符值在选择“禁用”时。我知道可以使用 select:invalid 给出它，但我发现它仅在 select 是“必需”时才有效，但我想要以下场景的解决方案。

<select disabled>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>

注意：我必须解决的要求是在选择框中的占位符选项，即禁用的选项“-请选择-”必须是斜体，其余选项必须是正常字体样式。即使选择框被展开。 so you see in the "required state" I am able to give them different styles using :invalid selector(which doesn't works when the select is in "disabled state"), but in the disabled state, I am able to give just一种类型，即斜体或正常，如果选择了一个选项并且选择框在某些条件下被禁用/不可编辑，则由于斜体样式，该选项看起来像是一个占位符。

【问题讨论】：

这能回答你的问题吗？ How to style Disabled Options in a form

标签： html css sass

【解决方案1】：

这应该可行：

select:disabled {
  background: red; /* For exemple */
}

【讨论】：

【解决方案2】：

我已尽力理解您的问题陈述，因此尝试涵盖可能对您有用的解释性场景，请通过 html 和 css 文件中的开发人员 cmets。

select:invalid,
select:disabled{
   border-color: red;
}

/*
these are the default values which select disabled attribute adds to the CSS of select box by default
opacity: 0.7;
border-color: rgba(118, 118, 118, 0.3);
*/

<!--Scenario 1: Where you had only the required attribute and wanted to validate it by say border red-->
<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>
<!--Scenario 2: where your selectbox is disabled yet shows a required type error-->
<select disabled>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>

【讨论】：

@Devlina Das，我想你想要当我们给禁用模式选择时出现的不透明背景效果以及显示禁用选择框无效的附加 CSS，我已经尝试覆盖这些场景。让我知道它是否适合您。
您好，感谢您的回答。实际上，我必须解决的要求是在选择框中的占位符选项，即禁用选项“-请选择-”必须为斜体，其余选项必须为正常字体样式。即使选择框被展开。所以你看到在所需的状态下我可以给他们不同的样式，但在禁用状态下，我只能给出一种类型，即斜体或正常，如果选择了一个选项并且选择框被禁用/非- 在某些情况下可编辑，由于斜体样式，该选项看起来像是一个占位符。

【解决方案3】：

请在选择菜单的所有条件下使用此 CSS 方法：-

    select{color:pink;}
select option{color:blue;}
select option[disabled]{color: red; font-style:italic;}
select:disabled{color: yellow; font-style:italic;}

   

 <select disabled>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>

<select>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>

【讨论】：

您好，感谢您的回答。但是如果我选择了一个选项然后禁用了选择框，则使用此选项，该选项看起来也像一个占位符，假设占位符/禁用选项的颜色是红色，另一个选项的颜色是蓝色，这种区别可以是使用 :invalid 但它只在需要的状态下工作，我如何在禁用状态下实现相同的功能？希望我能解释一下:)
我更新了我的答案。你想做这样的事吗？

【解决方案4】：

试试这个它对我有用

<select class="form-control">
    <option value="" readonly="true" hidden="true" selected>Select your option</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

【讨论】：