巧用伪类选择器给select模拟placeholder效果

有时候会有些小的需求，比如<select>标签默认不支持placeholder😖,但临时有个页面上需要用到用到这个效果，在UI眼里select下拉菜单不支持placeholder是不合理的。

UI想要的效果

初步实现的效果

怎么破,为了一个小小的效果写一个表单美化自己造吗？ 其实我们可以用pseudo-classes,也就是css伪类来达到这种效果;

代码:

<select required>
    <option value="" disabled selected>请选择门店</option>
    <option value="1">门店一</option>
    <option value="2">门店二</option>
</select>

select:invalid {
  color:#a0a0a0;
}
select {
  color: #323232;
  option[value=""][disabled] {
    display: none;
  }
  option {
    color: #323232;
    &:first-child {
      color: #a0a0a0;
    }
  }
}

在线DEMO