純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待驗證