Question

假设我有这样的标记：

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

现在，我希望当值为空时，即当显示“选择”时，下拉列表仅以灰色显示。当用户选择其中一个选项时，它应该是黑色/默认颜色。

（这与我页面上带有灰色占位符的文本框在视觉上是一致的。）

我想完成这样的事情：

select[value=""] {
    color: gray;
}

但事实证明，select标签实际上没有值属性。

除了使用JavaScript之外，还有什么办法可以实现这个目标吗？

Answer 1

甜美简单，只需添加以下 CSS 即可解决您的问题。希望能帮到你。

select option[value=""] {
  color: red;
}

在 Google Chrome 上验证：版本 92.0.4515.107（官方版本）（64 位）
已在 Firefow 上验证：版本 90.0.2（64 位）

select option[value=""] {
  color: red;
}

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="">Two</option>  
    <option value="3">Three</option>  
    <option value="">Four</option>  
</select>

Answer 2

<select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
            <option style="color:Gray">Select</option>
            <option style="color:Black">Value 1</option>
            <option style="color:Black">Value 2</option>
</option>
        </select></span></span></td>

Answer 3

尝试此代码：

select > option[value=""]{
     color: gray;
}

Answer 4

您可以使用伪类 :first-child、:nth-child(1)、:nth-of-type(1)，如果您的空选项始终位于第一个位置。据我了解，默认情况下，应首先设置具有空值和文本“选择”的选项。在这种情况下，我们会意识到这一点。

仅当值为空时，如何设置样式选择下拉列表

4 个答案: