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

【问题标题】：How to style select dropdown only when value is empty仅当值为空时如何设置选择下拉列表的样式
【发布时间】：2014-04-13 02:56:40
【问题描述】：

假设我有这样的标记：

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

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

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

我想完成这样的事情：

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

但事实证明，select标签并没有真正的value属性。

除了使用 JavaScript 之外，还有什么方法可以做到这一点？

【问题讨论】：

好问题。我不知道有什么办法
您是否只想将“Select”一词的文本设为灰色？还是您希望该项目的背景为灰色？或者您是否希望整个下拉框的背景为灰色？
只是选择这个词。
你介意使用 jquery
我能够找到 (jsfiddle.net/Idered/LufkN)，这可能是您在没有 javascript 的情况下最接近实现所需效果的方法。希望它在某种程度上有所帮助。

标签： html css

【解决方案1】：

Styling options, will only style them as shown in the drop down list, not when the select is not in focus.我希望在显示空白选项时选择斜体，可以这样实现：

/* If the select does not have a valid value, ie the blank option is selected, we make it italic */
select:invalid {
    font-style: italic;
}

/* Now the child options inherit the italics style, so we reset that*/
select > option {
    font-style: normal;
}

/* Apply italics to the invalid options too when shown in the dropdown */
select option[value=""], select option:not([value]) {
    font-style: italic;
}

【讨论】：

【解决方案2】：

甜蜜而简单，只需在下面添加 CSS 即可解决您的问题。希望对你有所帮助。

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

在谷歌浏览器上验证：版本 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>

【讨论】：

不解决 OP 问题。当您的代码显示“选择”时，它不是红色的，只有在显示下拉菜单时。

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个代码：

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

【讨论】：

仅在列表中起作用，而不是在选择本身中。 Firefox 有自己的列表样式 -> 什么都不做

【解决方案5】：

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

【讨论】：

那是 JavaScript。 OP 特别提到了一个不是 JavaScript 的解决方案。
嗯，谢谢，那是我最后的手段，我想知道是否有办法在没有 JS 的情况下做到这一点。我觉得很奇怪 select 在 input 时不应该有 value 属性。
让我看看这个！
@NatarajanShanker 这是因为对于select，value 是在每个option 中指定的，而不是select 本身。