這篇來提一個設計上的易用性的小技巧,來自前幾天看到的討論 常見到一個需求是,你會想在選項裡增加提示字眼(例如:請選取選項),但又不是真的想讓使用者選取它 這算是在小地方對使用者更貼心的技巧,那麼要如何達成呢? 先從傳統的透過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;會在選取時發揮作用,讓選單裡乾脆不出現這個選項 目前就看到這幾種方式,設計時可以考慮使用來增加易用性