前端做的查询页时，查询条件一般包括多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;
}

   效果如下：

请选择选项1选项2选项3选项4选项5

   想了解更多关于CSS选择器内容请看：CSS选择器介绍