Question

我有一个＆lt; select＆gt;：＆＃13; ＆＃13; 选择：无效{＆＃13; 颜色：红色;＆＃13; }＆＃13; ＆lt; select required＆gt;＆＃13; ＆lt;选择已停用选项＆gt; - 请选择 - ＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 1＆＃34;＆gt; A＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 2＆＃34;＆gt; B＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆＃13; 不幸的是，禁用的选择未标记为红色。任何的想法？这不是我喜欢的风格，我喜欢选择风格！

Answer 1

您需要为第一个选项指定 value="" 。如果没有value=""，则选项的值隐式等于其文本内容，这意味着它符合required约束。

演示：

select:invalid { color: red; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

以上将使选择+所有选项变为红色，直到选择了一个值。

如果您希望选项总是为黑色，只需稍微扩展一下CSS：

select:invalid { color: red; }
select option { color: black; }

<select required>
  <option disabled value="" selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

Answer 2

尝试使用option:disabled。

select option:disabled {
  color: red;
}

<select required>
  <option disabled selected>- please choose -</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

Answer 3

.choose_elements{
    background-color : red;
}
.elements{
    background-color : white;
}

<select required 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="choose_elements">
    <option value="0" class="choose_elements">- please choose -</option>
    <option value="1" class = "elements">A</option>
    <option value="2" class = "elements">B</option>
</select>

样式无效<select>使用：无效

3 个答案: