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

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

有一种方法可以只使用 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和value=""时，将应用:invalid 987654331。可以看到空值还是可以的。

如果只有select 支持pattern，那么我们可以改用正则表达式进行验证。在发表此评论时，它不支持且仅支持输入“文本”类型。

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

Answer 2

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

<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 3

我使用 :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 4

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

见imghttps://ibb.co/d9453b

Answer 5

<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 6

你要找的是这个：

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

Here, have a fiddle.

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

Answer 7

var select = document.getElementsByTagName("select");

for(var i = 0;i < select.length; i++)
{
var el = select[i];
var optVal = el.options[el.selectedIndex].value
el.addEventListener('change', function () {
// Using an if statement to check the class
    if (optVal == "") {
        el.classList.remove('not_chosen');
    } else {
        el.classList.add('not_chosen');
    }
});
}

Answer 8

我认为您不能使用纯 CSS 定位 option 标记；你只能修改select标签。

• Effort to modify a select tag。
• Same effort to modify an option tag。

但是，有一些解决方法。见this question。