【HTML・CSS】selectタグで作ったプルダウンメニューの横幅を統一する方法

はじめに

HTMLのフォームでは、selectタグとoptionタグを使ってプルダウンメニューを作成できます。
このプルダウンメニューですが、メニューを複数作成したときに、横幅が選択肢の長さになってしまい、それぞれのプルダウンメニューの横幅が揃わない場合があります。

つぎの例では、2つのプルダウンメニューで横幅が変わってしまっています。

See the Pen
プルダウンメニューの横幅を一定に固定する Part1 by aiiro (@aiiro29)
on CodePen.

この記事ではCSSを使ってプルダウンメニューの横幅を一定に固定し、長さを統一する方法を紹介します。

CSSのwidth属性を使って横幅を統一する

CSSでwidthプロパティをselectタグの要素に設定することで、プルダウンメニューの横幅を固定できます。

つぎの例は、2つのselect要素にsame-width-listクラスを設定し、same-width-listで width: 200px; を指定しています。

その結果、プルダウンメニューの横幅が200ピクセルで統一されています。

See the Pen
プルダウンメニューの横幅を一定に固定する Part2 by aiiro (@aiiro29)
on CodePen.

使用したHTML

<h3>プルダウンの横幅を一定に固定する</h3>
<div>
  <select class="same-width-list">
    <option value="1">短い幅1</option>
    <option value="2">短い幅2</option>
    <select/>
</div>

<div>
  <select class="same-width-list">
    <option value="1">長い幅のメニュー1</option>
    <option value="2">長い幅のメニュー2</option>
    <select/>
</div>

使用したCSS

.same-width-list {
  width: 200px;
}