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