在下拉列表中更改占位符的颜色
在下拉列表中更改占位符的颜色
提问于 2014-02-08 22:38:42
你可以看到我正在处理的表格：
http://www.escalateinternet.com/free-quote.php
这是下拉预算的代码：
<td><select id="budget" style="width:420px;">
<option value="">Choose Your Budget</option>
<option value="250">$250-$500 Per Month</option>
<option value="500">$500-$750 Per Month</option>
<option value="750">$750-$1000 Per Month</option>
<option value="100">$1000-$1500 Per Month</option>
<option value="1500">$1500-$2500 Per Month</option>
<option value="2500">$2500-$5000 Per Month</option>
<option value="5000">$5000-$7500 Per Month</option>
<option value="7500">$7500-$10000 Per Month</option>
<option value="10000">$10,000 or More Per Month</option>
</select></td>如何使“选择您的预算”是默认情况下与其他占位符相同的灰色文本，然后当选择预算时，该文本的颜色将更深。我只是试着让它与其他形式的配色方案相匹配.
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-02-08 22:45:05
注意： 经过六年多的测试之后，在一些浏览器中，这个片段不再像预期的那样运行。例如，在当前的FireFox版本中。然而，在Opera 70.0.3728.95中，它仍然有效。
您可以使用伪类option:checked
<style>
#budget option:checked{
color:red;
}
</style>看这个演示：http://jsbin.com/gilip/1
Stack Overflow用户
发布于 2014-02-08 22:51:05
可能重复的如何为“选择框”制作占位符？
缺点是，select元素不支持占位符，您想要做的事情在css中是不完全可以实现的。然而，一些简单的JS可以在这里帮助我们。
(我假设你会使用jQuery)
$(document).ready(function(){
$('select').on('change', function(){ //attach event handler to select's change event.
//use a more specific selector
if ($(this).val() === ""){ //checking to see which option has been picked
$(this).addClass('unselected');
} else { // add or remove class accordingly
$(this).removeClass('unselected');
}
});
});额外编辑:if/see块可以重构为一行(请参阅.toggleClass())：
$(this).toggleClass('unselected', $(this).val() === "");我还建议将disabled属性赋予它。然后，您可以添加如下样式：
select{
color: black;
}
select.unselected{
color: gray;
}
//edit: you might want to do this to make it that bit nicer:
select option:first-child{
display: none;
} 不要忘记给select元素一个unselected的初始类。
希望这能帮上忙！
Stack Overflow用户
发布于 2019-07-30 21:23:41
下面是我如何处理占位符文本颜色为浅灰，普通文本白色和背景黑色。在移除焦点后，所选选项仍然是白色的。
select {
color: #fff!important;
background-color: #000!important;
}
select:invalid {
color: #535353!important;
}
select:focus {
color: #fff!important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21652680
复制相关文章
相似问题
腾讯云开发者
