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;
}

Here, have a fiddle.

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

Answer 2

我认为你不能使用纯CSS来定位option标签;您只能修改select代码。

但是，有一些解决方法。请参阅this question。

Answer 3

有一种方法只能通过CSS来实现。但是您需要调整HTML以遵循一些规则：

将您的select设置为required
已禁用的选项需要具有空值字段：value=""
您需要设置:valid和:invalid状态的样式

这是标记：

<select required>
    <option value="" selected disabled>Disabled default</option>
    <option value="" disabled>Just disabled</option>
    <option value="" >Empty but valid</option>
    <option value="a-value-here">Fully valid</option>
</select>

select {
   width: 500px;
   padding: 10px;
}

select:invalid {
   background: red;
}

select:valid {
   background: green;
}

这是小提琴：https://jsfiddle.net/james2doyle/hw1m2cd9/

现在，当一个选项，为disabled，并且还{{} 1}，{的{1}}造型将被应用。您可以看到空值仍然可以。

如果仅value=""支持:invalid，那么我们可以使用正则表达式进行验证。在发表评论时，它不支持，仅在输入的“文本”类型上受支持。

此解决方案应适用于IE> = 10

Answer 4

<select>
    <option value="volvo" >Volvo</option>
    <option value="saab">Saab</option>
    <option value="vw" disabled>VW</option>
    <option value="audi" class="colr">Audi</option>
    <option value="aaa">Something</option>
    <option value="ccc">Other</option>
    <option value="vw" disabled>VW</option>
    <option value="vvv">Apple</option>
    <option value="nnn" class="colr">Mango</option>
    <option value="cmmmcc">Plum</option>
</select>

option:disabled {
   background: #ccc;
   width: 500px;
   padding: 5px;
   }

option.colr {
   background: red;
   width: 500px;
   padding: 5px;
   }

检查链接 http://jsfiddle.net/W5B5p/110/

Answer 5

我使用：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 6

我使用了一个简单的技巧将禁用的选项设置为灰色，希望有人会发现它有用。

<label>
    <div id="disabledMask"></div>
    <select id="mySelect">
        <option disabled selected>Please Select</option>
        <option value="foo">Bar</option>
    </select>
</label>

<style>
    label {
        position: relative;
    }

    #disabledMask {
        position: absolute;
        background-color: #fff;
        opacity: 0.5;
        pointer-events: none;
        width: 100%;
        height: 100%;
        display: none;
    }
</style>

<script>
    var toggleMask = function(){
        var option = this.options[this.selectedIndex];
        var disabledMask = document.getElementById('disabledMask');
        disabledMask.style.display = option.disabled? 'block' : 'none';
    };

    var mySelect = document.getElementById('mySelect');
    mySelect.addEventListener('change', toggleMask);
    toggleMask.bind(mySelect)();
</script>

这是一个jsfiddle：https://jsfiddle.net/jhavbzcx/

免责声明：根据您选择的样式，您可能需要设置#disabledMask的样式，以免与下拉箭头重叠。

Answer 7

recursive=False

Answer 8

<select class="dropdown" name="contactMethod">
<option selected disabled>Contact method:</option>
<option class="dropdownplus"> E-mail: </option>
<option class="dropdownplus"> Website </option>
<option class="dropdownplus"> None</option>
</select>

<style>
.dropdown {
  background-color: rgba(195, 0, 97, 0.1);
  width: 100%;
  border: 1px solid #CC0061;
  border-style: inset;
  color: grey;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  }

option.dropdownplus {
  color: black;
}
</style>

请参阅img https://ibb.co/d9453b

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

8 个答案: