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

How to style Disabled Options in a form

提问by user2195922

I'm using a form with a drop-down menu that contains some options disabled, so the users cannot select them. I'm trying to customize via css these elements but I have some problems with Chrome and IE7/8/9/10.

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

HTML:

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:

CSS：

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

This code works only with Firefox and doesn't work with Chrome and IE (all version).

此代码仅适用于 Firefox，不适用于 Chrome 和 IE（所有版本）。

Any idea to solve this problem?

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

---

---

Below the html code for select-box

在选择框的 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>

回答by Cthulhu

What you're looking for is this:

你要找的是这个：

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

Here, have a fiddle.

来，小提琴。

Attention:according to reports on the comments section, this solution does not work on OS X.

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

回答by MayhemBliz

I used :invalidto solve my issue, description below:

我使用:invalid来解决我的问题，描述如下：

So these answers do style the disabled option but only within the dropdown. Not if you wanted to display the disabled option at the top of the list as a "Please select".

因此，这些答案确实设置了禁用选项的样式，但仅在下拉列表中。如果您想在列表顶部将禁用的选项显示为“请选择”，则不会。

Hope this helps others having a similar issue to what I had.

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

Basically, the select needs to be a required field for this to work:

基本上，选择需要是一个必填字段才能工作：

<select required>

Assuming the option is at the top of the list:

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

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

And your SCSS looking something like this:

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

So it's the :invalid which allows us to colour the disabled selected option.

所以它是 :invalid 允许我们为禁用的选定选项着色。

Thanks to Markus Oberlehner for his post:

感谢 Markus Oberlehner 的帖子：

Blog post: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/

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

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

代码笔：https://codepen.io/maoberlehner/pen/WOWrqO

回答by JSW189

I do not think you can target an optiontag using pure CSS; you can only modify a selecttag.

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

• Effort to modify a selecttag.
• Same effort to modify an optiontag.

• 努力修改一个select标签。
• 修改option标签的努力相同。

However, there are workarounds. See this question.

但是，有一些解决方法。看到这个问题。

回答by Joe Impact

I used a simple hack to make disabled options grey, hopefully someone finds it useful.

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

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

Here is a jsfiddle: https://jsfiddle.net/jhavbzcx/

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

Disclaimer: depending on the styling of your select you may need to style the #disabledMask so as not to overlap the dropdown arrow.

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

回答by gecco

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

Check the link http://jsfiddle.net/W5B5p/110/

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

回答by james2doyle

There is a way to do this with CSS only. But you need to tweak your HTML to follow some rules:

有一种方法可以仅使用 CSS 来做到这一点。但是你需要调整你的 HTML 以遵循一些规则：

• set your selectto be required
• disabled options need to have empty value fields: value=""
• you need to style the :validand :invalidstates

• 设置你的select是required
• 禁用选项需要有空值字段： value=""
• 你需要设计:valid和:invalid状态

Here is the markup:

这是标记：

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

Here is the fiddle: https://jsfiddle.net/james2doyle/hw1m2cd9/

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

Now, when an option that is disabledand also value="", the :invalidstyling will be applied. You can see that empty values are still ok.

现在，当一个选择disabled也是如此value=""，:invalid将应用样式。您可以看到空值仍然可以。

If only selectsupported pattern, then we could validate with regex instead. At the time of this comment, it does not and is only supported on input "text" types.

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

This solution should work on IE >= 10

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

回答by Sadikie

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

回答by Chris

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

See img https://ibb.co/d9453b

见img https://ibb.co/d9453b