如何设置表单中的"禁用选项"的样式

Question

我正在使用带有下拉菜单的表单,其中包含一些禁用的选项,因此用户无法选择它们.我正在尝试通过css自定义这些元素,但我在使用Chrome和IE7/8/9/10时遇到了一些问题.

HTML:

<div class="formBody">
    <select  name="form[categoria][]"  id="categoria"  class="rsform-select-box">
      <option selected="selected" value="">Scegli una categoria</option>
      <option disabled="disabled" value="">Impresa </option>
    </select>
    <span class="formValidation">
        <span id="component50" class="formNoError">Scegli una categoria</span>
    </span>
</div>

CSS:

select option[disabled] { color: #000; font-weight: bold }

此代码仅适用于Firefox,不适用于Chrome和IE(所有版本).

有什么想法解决这个问题吗？

---

在选择框的html代码下面

<div class="formBody"><select  name="form[categoria][]"  id="categoria"  class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option  value="Servizi">Servizi</option><option  value="Informatica">Informatica</option><option  value="Commercio">Commercio</option><option  value="Telecomunicazioni">Telecomunicazioni</option><option  value="Editoria/Stampa">Editoria/Stampa</option><option  value="Meccanica/Elettrica">Meccanica/Elettrica</option><option  value="Alimentare">Alimentare</option><option  value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option  value="Tessile/Moda">Tessile/Moda</option><option  value="Mobili/Arredamenti">Mobili/Arredamenti</option><option  value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option  value="Trasporto/Logistica">Trasporto/Logistica</option><option  value="Finanza">Finanza</option><option  value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option  value="Commercialista">Commercialista</option><option  value="Ragioniere">Ragioniere</option><option  value="Notaio">Notaio</option><option  value="Tributarista">Tributarista</option><option  value="Avvocato">Avvocato</option><option  value="Consulente del lavoro">Consulente del lavoro</option><option  value="Altro">Altro</option><option disabled="disabled" value="">P.A. Locale </option><option  value="Regione">Regione</option><option  value="Provincia">Provincia</option><option  value="Comune">Comune</option><option  value="Comunit&agrave; Montana">Comunit&agrave; Montana</option><option  value="ASL">ASL</option><option  value="CCIA">CCIA</option><option  value="Altro">Altro</option><option disabled="disabled" value="">P.A. Centrale </option><option  value="Associazione di categoria">Associazione di categoria</option><option  value="Privato">Privato</option><option  value="Altro">Altro</option></select><span class="formValidation"><span id="component50" class="formNoError">Scegli una categoria</span></span></div>

Answer 1

您正在寻找的是:

select option:disabled {
    color: #000;
    font-weight: bold;
}

在这里,有一个小提琴.

注意:根据评论部分的报告,此解决方案不适用于OS X.

Answer 2

我用：invalid解决了我的问题，说明如下：

因此，这些答案的确可以设置禁用选项的样式，但只能在下拉列表中。如果要在列表顶部以“请选择”显示禁用的选项，则不需要。

希望这可以帮助其他人遇到与我类似的问题。

基本上，选择必须是必填字段才能起作用：

<select required>

假设该选项位于列表的顶部：

<option disabled selected value="">Please select</option>

您的SCSS看起来像这样：

select {

  // The select element is set to required
  // as long as the selected options value
  // is empty the element is not valid.
  &:invalid {
    color: gray;
  }

  // Styling for browsers which do support
  // styling select option elements directly
  [disabled] {
    color: gray;
  }

  option {
    color: black;
  }
}

所以是：invalid，它使我们能够为禁用的选定选项着色。

感谢Markus Oberlehner的帖子：

博客文章：https : //markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/

Codepen：https：//codepen.io/maoberlehner/pen/WOWrqO

Answer 3

我不认为你可以option使用纯 CSS 来定位标签；您只能修改一个select标签。

• 努力修改select标签。
• 修改option标签同样需要付出努力。

不过，也有解决方法。看到这个问题。