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

问题描述 投票：0回答：9

我正在使用带有下拉菜单的表单，其中包含一些禁用的选项，因此用户无法选择它们。我正在尝试通过 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>
css forms
9个回答
65
投票

您要找的是这个：

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

这里，拉一把小提琴。

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

15
投票

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

4
投票

有一种方法可以仅使用 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
样式。可以看到空值还是可以的。

如果只有

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

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

3
投票

我不认为你可以使用纯 CSS 来定位 

option
标签；您只能修改 
select
标签。

但是，有解决方法。请参阅这个问题。

1
投票
<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/

1
投票

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

<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 的样式，以免与下拉箭头重叠。

0
投票

您可以使用 

:has()
检查禁用的选项。

select:has(option:disabled:checked) {
  color: lightgray;
}
-2
投票
<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>

参见图片https://ibb.co/d9453b

-3
投票
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');
    }
});
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.