实现 select 下拉框第一个数据颜色显示

在实际项目开发的时候，可能需要使用下拉框，第一个选择的样式为灰色

类似于这样的效果，为了区分，所以我用了红色

       .select {
             color: #ccc;
        }
        option {
            color: red
        }
    <select class="select"> 
        <option selected hidden>请选择</option>
        <option value="斗鱼直播">斗鱼直播</option>
        <option value="虎牙直播">虎牙直播</option>
        <option value="熊猫直播">熊猫直播</option>
    </select>

这就是实现上面效果的所有代码
在这里在为大家上面用到的两个属性： selected 是默认选中和 hidden属性。
如果我为斗鱼直播加上selected

  <select class="select"> 
        <option >请选择</option>
        <option selected value="斗鱼直播">斗鱼直播</option>
        <option value="虎牙直播">虎牙直播</option>
        <option value="熊猫直播">熊猫直播</option>
    </select>

结果：

默认的就是斗鱼直播，这个值。

————————————————————————————————————

还有一个hideen属性，它会隐藏下拉框中的值。

现在是使用了hidden属性的，那么我们现在看到的是在这个下拉列表框中是没有请选择的这个值的，那么我接下来去取消掉hidden这个属性

这就是它的区别，我们可以根据项目的需求去使用。