前端做的查询页时，查询条件一般包括多input、textarea、select等，其中input、textarea等都支持placeholder，默认值是灰色的，而select却不支持placeholder，为了保持一样的样式，只好自己动手了。实现的话最好当然是纯CSS实现最好，但是网上找了很久，找到的基本都是以下这个用JS实现的。JS实现有诸多不便，比如JS只能设置已架载的select的样式；如果最开始选中的值不是默认值不好处理等。
网上找到JS实现的样例代码如下，效果不理想特别是对于已经写好改造的代码：
var unSelected = "#bebebe";
var selected = "#333333";
$(function(){
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find('option:first').val()) {
$(this).css("color", unSelected);
}
else
{
$(this).css("color", selected);
}
});
} 我自己写的纯CSS实现的代码：
/*select正文选项使用#333333;黑色*/
select
{
color:#333333;
}
/*设置空值为默认值，使用#bebebe;浅灰色*/
select:has(> option:checked[value=""])
{
color:#bebebe;
}
/*下拉正文选项使用#333333;黑色*/
select option{
color:#333333;
}
/*选项中空值为默认值，使用#bebebe;浅灰色*/
select option[value=""]
{
color:#bebebe;
}效果如下：
想了解更多关于CSS选择器内容请看：CSS选择器介绍
上一编 CSS 选择器介绍
点赞(3)
请不要重复点赞
评论列表