Help us understand the problem. What is going on with this article?

【初心者向け】select要素にプレースホルダーを付ける方法と付けられない理由の考察

どうも7noteです。select要素のプレースホルダーについて。

ちょっと変な矛盾しているタイトルですが、ご了承ください。

先日、デザインに合わせてコーディングをしていた時のことなのですが、select要素にplaceholderのような見た目を付ける場面に出会いました。
私もいろいろ調べてみたのですが、厳密にはselect要素にplaceholderを指定できません(指定しても何もなりません)。

  • とりあえず無理やりな方法でもいいからselect要素にplaceholderを指定したい方は①から
  • select要素にplaceholderを選択できない理由が知りたい方は②から

①select要素でplaceholderっぽく見せる方法

その1:入力後、サンプルは選択肢から消す方法

<select>
  <option value="" disabled selected style="display:none;">選択してください</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>

引用元:https://scriptgraph.blogspot.com/2015/07/select.html

こちらは、optionの1つ目をplaceholderっぽくみせておき、選択肢からは非表示にする方法です。
selectedがついているので、ページ読み込み時は「選択してください」の文字がselect内にでますが、"display=none;"が指定されているため選択肢には表示されません。そのため、placeholderっぽい役割を果たします。

この方法の注意点としては、placeholderのように色を薄く出来ない事と、
デフォルトが「全て」という選択肢ではないことに気を付けなければなりません。

その2:1つ目だけplaceholderのように色を薄くする方法(javascript)

<select>
  <option value="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のちょいテク詰め合わせ

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away