[CSS]selectboxにplaceholderを作る

htmlのselectタグにはplaceholderないんですよね〜
ただデザインにplaceholder入ってるやんっ！てなる時あるあるでしょう。
毎回忘れるので忘備録としてメモリます！

これでok

1. <select>にrequiredかける。
2. placeholder用の<option>にdisabled,とselectedをかける
3. select:invalid { color: 色; }を付ける

select.html

<label for="id" class="label">
  <select name="select" id="id" class="select" required>
    <option value="" disabled selected>選択してください</option>
    <option value="hoge">hoge</option>
    <option value="fuga">fuga</option>
    <option value="piyo">piyo</option>
  </select>
</label>

select.css

select:invalid {
  color: gray;
}