どうも7noteです。select要素のプレースホルダーについて。
ちょっと変な矛盾しているタイトルですが、ご了承ください。
先日、デザインに合わせてコーディングをしていた時のことなのですが、select要素にplaceholderのような見た目を付ける場面に出会いました。
私もいろいろ調べてみたのですが、厳密にはselect要素にplaceholderを指定できません（指定しても何もなりません）。
- とりあえず無理やりな方法でもいいからselect要素にplaceholderを指定したい方は①から
- select要素にplaceholderを選択できない理由が知りたい方は②から
①select要素でplaceholderっぽく見せる方法
その１：入力後、サンプルは選択肢から消す方法
<select><optionvalue=""disabledselectedstyle="display:none;">選択してください</option><option>A</option><option>B</option><option>C</option><option>D</option></select>こちらは、optionの1つ目をplaceholderっぽくみせておき、選択肢からは非表示にする方法です。
selectedがついているので、ページ読み込み時は「選択してください」の文字がselect内にでますが、"display=none;"が指定されているため選択肢には表示されません。そのため、placeholderっぽい役割を果たします。
この方法の注意点としては、placeholderのように色を薄く出来ない事と、
デフォルトが「全て」という選択肢ではないことに気を付けなければなりません。
その2：1つ目だけplaceholderのように色を薄くする方法(javascript)
<select><optionvalue="placeholder">選択してください</option><option>A</option><option>B</option><option>C</option><option>D</option></select><style>select{color:#ddd;}option{color:#333;}</style><script>$(function(){$('select').on('change',function(){if($(this).val()=="placeholder"){$(this).css('color','#ddd')}else{$(this).css('color','#333')}});});</script>javascript（&jQuery）を使い、特定の選択肢が指定された時のみ色を変更する書き方ができます。
この方法が一番textboxなどのplaceholderに近い書き方になるかなと思います。
②なぜselect要素にはplaceholderが存在しないのかの考察
そもそも、デフォルトの属性としてplaceholderが存在しないという事はそのような使い方を推奨していないということだと考えます。
「必ず選択肢のうちのどれかを選択してもらう時に使うもの」という認識を持って使う方が正しいのではないか。
例でエリア検索するためのselect要素を用意した場合、以下のような書き方はよろしくないのではないかという考えです。
<!-- よくない例 ---><select><option>エリアを選択</option><!-- ↑これが選択されている場合というのは意味が存在しない。
これが選択されているときに全国を出すのって「エリアを選択」という日本語と矛盾してるのでは？？--><option>東京</option><option>大阪</option><option>名古屋</option>・
・
・
</select><button>検索する</button>もし、初期値の「エリアを選択してください」のまま検索するボタンが押されたとき、おそらく全国の検索結果を出すと思います。
では、選択肢と表示内容を合わせるのであれば本来selectの値は「全国」となっているのが正しいのではないでしょうか。
もちろん申込フォームなどでは「選択無し」とする場合もあるかもしれませんし、生年月日の入力では「年を選択」などが入っている方が使いやすいと思います。
ただ、そのような場合以外では、基本的には必ずどれかの選択肢を選べるような作りにすべきと私は考えています。
生年月日なども、デフォルトは「年を選択」などを入れずに、サイトに適した中央値あたりの数字を入れておく方がいいと思いますし、むしろそのように使うものだと思います。
賛否両論あるかもしれませんが、事実select要素にはplaceholderの指定ができないので、あながち間違いじゃないのかも。と思っています。
ご意見お考えある方是非コメントください！お待ちしています！
まとめ
select要素でplaceholderっぽいことはできるが、必ずどれかが選択されているという考えで作成する方が正しいのではないか。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ