Css 如何设置窗体中禁用选项的样式

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

HTML:

此代码仅适用于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>

Scegli una Categoria Services Informatica Commercio Telecomunication Editoria/Stampamecanica/Elettrica Alimenta Rechimica/Farmaceuticaedizia Tessile/ModaMobili/ArredamentiAlberghi/Ristoranti-Rasporto/Logistica Finanzaa Altroprofessionista Commercialstaragianiotentials Tavovovocarente del lavoroAltroP.A。地区省通信单位和agrave；蒙大拿州。分类协会中心

我不认为您可以使用纯CSS针对

选项

标记；您只能修改

select

标记

---

然而，有一些变通办法。请参阅。

您要查找的是：

选择选项：禁用{
颜色：#000；
字体大小：粗体；
}

注意：根据评论部分的报告，此解决方案在OS X上不起作用。

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

沃尔沃汽车
萨博
大众汽车
奥迪
某物
其他
大众汽车
苹果
芒果
梅子
选项：禁用{
背景：#ccc；
宽度：500px；
填充物：5px；
}
option.colr{
背景：红色；
宽度：500px；
填充物：5px；
}

检查链接

var select=document.getElementsByTagName（“select”）；
对于（变量i=0；i

联系方式：
电邮：
网站
没有一个
.下拉列表{
背景色：rgba（195,0,97,0.1）；
宽度：100%；
边框：1px实心#CC0061；
边框样式：插图；
颜色：灰色；
文字装饰：无；
显示：内联块；
字体大小：16px；
填充：10px；
边缘顶部：10px；
边缘底部：10px；
}
option.dropdownplus{
颜色：黑色；
}

---

请参阅img我使用的：无效来解决我的问题，描述如下：

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

希望这能帮助其他和我有类似问题的人

基本上，select必须是此项工作所必需的字段：

<select required>

因此，它是：invalid，它允许我们为禁用的选定选项着色

感谢Markus Oberlehner的职位：

博文：

---

Codepen:

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

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

请选择
酒吧
标签{
位置：相对位置；
}
#禁用任务{
位置：绝对位置；
背景色：#fff；
不透明度：0.5；
指针事件：无；
宽度：100%；
身高：100%；
显示：无；
}
var toggleMask=函数（）{
var option=this.options[this.selectedIndex]；
var disabledMask=document.getElementById（'disabledMask'）；
DisabledTask.style.display=option.disabled？'block'：'none'；
};
var mySelect=document.getElementById（'mySelect'）；
mySelect.addEventListener（'change'，toggleMask）；
toggleMask.bind（mySelect）（）；

下面是一个JSFIDLE：

---

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

有一种方法可以仅使用CSS来完成此操作。但您需要调整HTML以遵循一些规则：

• 将

  select

  设置为

  required

• 禁用的选项需要有空值字段：

  value=”“

• 您需要设置

  ：valid

  和

  ：invalid

  状态的样式

以下是标记：

禁用默认值
刚刚残废
空而有效
完全有效

选择{
宽度：500px；
填充：10px；
}
选择：无效{
背景：红色；
}
选择：有效{
背景：绿色；
}

这是小提琴：

现在，当禁用了

选项且
值=“”
时，将应用
：invalid
样式。您可以看到空值仍然可以

如果只
选择
支持的
模式
，那么我们就可以用regex进行验证。在发表此评论时，它没有，并且仅在输入“文本”类型上受支持

这个解决方案应该适用于IE>=10
添加一个.disabled类可以很好地解决这个问题，而不仅仅是下拉列表中的选项。我认为您不能在所有浏览器中更改“select”元素，但您可以使用一些模拟/替换“select”元素的脚本。在Firefox中，类似这样的代码运行良好。我正在尝试找到一个适用于所有浏览器的替代选项。如果选项标记被禁用或添加了类，则可以将其作为目标。我已经编辑了@JSW189 fiddle并更新了它的颜色、背景和宽度的样式，它只在OSX上的Firefox中工作，而不是Chrome或Safari。但是，一些默认样式应用于禁用的元素。刚刚在Firefox和Chrome中进行了测试，并且在这两种浏览器上都可以使用。您使用的是什么版本？稳定我看到默认行为没有变化。刚刚在Chrome 43.0.2357.65 m、Firefox 38.0.1和Firefox Developer Edition 40.0a2（2015-05-24）中测试过，它工作得很好。刚刚在IE、Chrome和Firefox中测试过，在任何地方都可以完美工作：）如果你遇到s的问题
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');
    }
});
}

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

<select required>

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

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

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