纯CSS实现select的placeholder效果

思路：利用CSS伪类，为select添加伪类required，即不能为空；而默认选项(Placeholder)的value为空，触发invalid，实现不选时置灰的效果；

Demo：

<style>
    select:invalid { color: gray; }
</style>
<select required>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="M">Male</option>
    <option value="F">Female</option>
</select>

效果如下：

兼容性：

Chrome，FF 完美实现

Safari，IE11，Edge（下拉列表中可见palceholder，但是不能选）

低版本IE待验证