はじめに：セレクトボックス

HTMLフォームで利用されるパーツの一つに、セレクトボックスがあります。提示した選択肢の中から、ユーザーが選べるインターフェースです。

このパーツは利用頻度が高いにもかかわらず、デザイン的なカスタマイズが非常に困難です。

テキストボックスはCSSで十分な装飾を施せます。チェックボックスとラジオボタンは少し複雑になりますが、それでもHTMLとCSSで調整可能な範囲です。しかし、セレクトボックスはそうではありません。インターフェースのデザインはOSやブラウザに依存し、CSSでのカスタマイズは限られています。

近年、それらを解決すべく新たな仕組みが作られています。この連載では、どのような仕組みが進んでいるのかを紹介します。

今回はセレクトボックスのおさらいをしつつ確認し、新たに導入されて実用可能な「区切り線」を紹介します。

セレクトボックスの基本

セレクトボックスは、HTMLのselect要素で実装されます。選択肢はoption要素で定義します。

<label for="fruit">果物を選んでください</label>
<select id="fruit" name="fruit">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="banana">バナナ</option>
</select>

このコードは以下のように表示されます。

さらに、項目をグループ分けする機能としてoptgroup要素があります。

<label for="food">食べ物を選んでください</label>
<select id="food" name="food">
  <optgroup label="果物">
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="cabbage">キャベツ</option>
    <option value="tomato">トマト</option>
  </optgroup>
</select>

区切り線の導入

ドロップダウンで項目を選択するUIといえば、OSメニューなどでもよく使われるのをご存じかと思います。その際、OS標準のメニューでは区切り線が使われることがあります。

以下はmacOSのメニューの例です。

このような区切りを、セレクトボックスでも行いたい場合があります。しかし、グループ化は前節で解説したoptgroup以外に手段がなく、「同一のグループだが視覚的に区分けしたい」という場合には手段がありませんでした。

しかし、近年ではhr要素をselect要素の中に入れられるようになり、項目をOSメニューのように区切ることが可能になりました。

コードは本当に単純で、select要素の中にhr要素を入れるだけです。

<label for="food">食べ物を選んでください</label>
<select id="food" name="food">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="banana">バナナ</option>
  <hr>
  <option value="carrot">にんじん</option>
  <option value="cabbage">キャベツ</option>
  <option value="tomato">トマト</option>
</select>

「バナナ」と「にんじん」の間に区切り線が挿入されているのが確認できます。

この機能は、Chrome 119、Safari 17、Firefox 122以降で利用可能です。モバイルではiOS Safari 17.4です。Android Chromeはセレクトボックスの表示方法が特殊なので、区切り線が表示されません。Android Firefoxは未対応ですが、対応予定のようです。

この機能はoptgroup要素と組み合わせて使うことも可能ですが、その場合はoptgroup内ではなくselectの子要素としてhrを入れる必要があります。

<label for="food">食べ物を選んでください</label>
<select id="food" name="food">
  <optgroup label="果物">
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <hr>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="cabbage">キャベツ</option>
    <option value="tomato">トマト</option>
  </optgroup>
</select>

区切り線の注意点

もしoptgroup内にhrを入れた場合、ブラウザはどうにかして表示しようとしますが、きっと制作者の思ったとおりにはならないでしょう。仕様でもセレクトボックスの区切り線であるhrはselectの子要素となっています。

<label for="food">食べ物を選んでください</label>
<select id="food" name="food">
  <optgroup label="果物">
    <option value="apple">りんご</option>
    <hr>
    <option value="orange">みかん</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <hr>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <hr>
    <option value="cabbage">キャベツ</option>
    <option value="tomato">トマト</option>
  </optgroup>
</select>

optgroup内にhrを入れた場合、hr直後のoptionのインデントが解除され、グループ化されているかどうかもわからなくなってしまっています。

このような状況を避けるためにも、hrは仕様のとおりselectの子要素として使いましょう。

アクセシビリティ

select要素内にhr要素を入れた場合、スクリーンリーダーは特に区切り線があることを伝えません。現在は視覚的なレイアウト目的でのみ使用可能です。

まとめ

今回はセレクトボックスの基本と、最近導入された区切り線の機能を紹介しました。区切り線は単純な機能ですが、使い方によっては非常に有効な手段となります。ぜひ活用してみてください。

次回は今後期待されるカスタマイズ機能について紹介します。