選擇輸入項的提示選項設計方式

這篇來提一個設計上的易用性的小技巧，來自前幾天看到的討論
常見到一個需求是，你會想在選項裡增加提示字眼(例如：請選取選項)，但又不是真的想讓使用者選取它
這算是在小地方對使用者更貼心的技巧，那麼要如何達成呢?

先從傳統的透過HTML找看看有沒有方法可以達成，印象中optgroup這個tag似乎有可能?
選項1

code:
<select name="demo">
    <optgroup label='請輸入選項'>
        <option value="1">選項1</option>
    </optgroup>
</select>

雖然的確有可以提示的部分，但是否符合需求就見仁見智了

第二種方式是透過selected屬性與disabled屬性並用
請輸入選項選項1

code:
<select name="demo">
    <option selected disabled>請輸入選項</option>
    <option value="1">選項1</option>
</select>

選項的預設值透過selected屬性解決，而disabled屬性則會在進行選取時發揮作用
看起來是不錯的方法，只是我在後面有看到一個我更喜歡的方式

第三種方式是透過CSS輔助
請輸入選項選項1

code:
<select name="demo">
    <option selected style="display: none;">請輸入選項</option>
    <option value="1">選項1</option>
</select>

display: none;會在選取時發揮作用，讓選單裡乾脆不出現這個選項


目前就看到這幾種方式，設計時可以考慮使用來增加易用性