セレクトボックスの作り方と初期値の設定・値の取得方法

無料ツール

セレクトボックスを自由に作成

選択肢・タイトル・説明文・ラベル・サイズ・色・枠線・矢印などを設定して、HTML・CSSを自動生成できます。

セレクトボックス作成ツールを使う

新しいタブで開きます

セレクトボックスは、用意された選択肢から項目を選ぶ入力フォームです。都道府県やカテゴリー、商品の種類など、さまざまな場面で使われています。

初期表示にはいくつかの方法があります。特に指定しなければ一番上の項目が表示され、任意の項目を最初から選択しておくこともできます。また、「選択してください」という案内を表示し、利用者に選択を促すことも可能です。

この記事では、基本のセレクトボックスの作り方を紹介します。初期表示の異なる2種類のデモを用意しているので、実際に項目を選びながら動作や取得結果を確認できます。

デモ

基本のセレクトボックス

初期表示の異なる2種類のセレクトボックスを比較できます。

①「選択してください」を初期表示

初期状態では都道府県が選択されていません。

都道府県

取得結果

取得した値：なし

変数の内容：value = "";

データ型：string（文字列）

② 最初から項目を選択

ページを開いた時点で「東京都」が選択されています。

都道府県

取得結果

取得した値：東京都

変数の内容：value = "東京都";

データ型：string（文字列）

どちらも選択した項目のvalue属性を文字列として取得します。①は初期値が空文字列、②は初期値が「東京都」です。項目を変更すると取得結果も更新されます。

Q 他のアイコンを使いたい場合はどうするの？

無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。

SVGアイコン作成ツールを使う

コードをコピーして使おう！

「選択してください」を初期表示

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のセレクトボックス</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

  <!-- JavaScriptファイル -->
  <script src="script.js" defer></script>

</head>
<body>

  <!-- セレクトボックス全体 -->
  <div class="basic-select-box_wrap">

    <!-- 入力項目のラベル -->
    <label class="basic-select-box_label" for="basic-select-box-first">
      都道府県
    </label>

    <!-- セレクトボックスと矢印 -->
    <div class="basic-select-box_select-wrap">

      <!--
        選択肢はoption要素で設定します。
        value属性には選択時に取得する値を指定します。

        最初のoption要素について
        value=""  ：値を空文字列にする
        selected  ：最初に表示する
        disabled  ：選択肢として再選択できないようにする
      -->
      <select class="basic-select-box_select" id="basic-select-box-first" name="prefecture">

        <option value="" selected disabled>選択してください</option>
        <option value="北海道">北海道</option>
        <option value="東京都">東京都</option>
        <option value="大阪府">大阪府</option>
        <option value="福岡県">福岡県</option>

      </select>

      <!-- セレクトボックス右端の下向き矢印 -->
      <svg class="basic-select-box_arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="m5 9 7 7 7-7"/>
      </svg>

    </div>

  </div>

</body>
</html>

/* セレクトボックス全体 */
.basic-select-box_wrap {
  width: 100%; /* 親要素の横幅に合わせる */
  max-width: 680px; /* 最大横幅。値を大きくすると横に広がる */
  margin: 0 auto; /* 左右中央に配置 */
  font-family: sans-serif; /* 使用するフォント */
}

/* 入力項目のラベル */
.basic-select-box_label {
  display: block; /* セレクトボックスの上に表示 */
  margin-bottom: 10px; /* ラベルとセレクトボックスの間隔 */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
}

/* セレクトボックスと矢印を配置する領域 */
.basic-select-box_select-wrap {
  position: relative; /* 矢印の配置基準 */
  width: 100%; /* 親要素の横幅に合わせる */
}

/* セレクトボックス本体 */
.basic-select-box_select {
  width: 100%; /* 横幅いっぱいに表示 */
  padding: 16px 52px 16px 16px; /* 内側の余白。右側は矢印のスペース */
  border: 2px solid #dbe5f1; /* 枠線の太さと色 */
  border-radius: 12px; /* 角丸。値を大きくすると丸みが強くなる */
  background: #ffffff; /* 背景色 */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  line-height: 1.5; /* 行間 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  appearance: none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance: none; /* Safari対応 */
  cursor: pointer; /* マウスを重ねたときのカーソル */
}

/* フォーカス時の表示 */
.basic-select-box_select:focus {
  border-color: #2563eb; /* 選択中の枠線の色 */
  outline: 3px solid rgba(37, 99, 235, 0.18); /* 外側の強調枠 */
}

/* セレクトボックス右端のSVG矢印 */
.basic-select-box_arrow {
  position: absolute; /* セレクトボックスの上に重ねる */
  top: 50%; /* 上下中央の位置 */
  right: 18px; /* 右端からの距離 */
  display: block; /* SVGの表示形式 */
  width: 20px; /* 矢印の横幅 */
  height: 20px; /* 矢印の高さ */
  color: #64748b; /* 矢印の色 */
  transform: translateY(-50%); /* 矢印を上下中央に揃える */
  pointer-events: none; /* 矢印の上からでも選択操作できるようにする */
}

/* 画面幅640px以下 */
@media (max-width: 640px) {

  /* スマートフォンでの内側余白 */
  .basic-select-box_select {
    padding: 14px 50px 14px 14px; /* 上下左右の余白を調整 */
  }

}

/* =========================================
   セレクトボックスの値を取得
========================================= */

/* セレクトボックスを取得 */
const select = document.getElementById("basic-select-box-first");

/* 初期状態の値を取得 */
let value = select.value;

/* 選択項目が変更されたときの処理 */
select.addEventListener("change", function () {

  /* 選択されたoption要素のvalue属性を取得 */
  value = select.value;

  /* 取得した値をコンソールに表示 */
  console.log("取得した値：" + value);

  /* 変数の内容を表示 */
  console.log("value = " + JSON.stringify(value) + ";");

  /* データ型を表示 */
  console.log("データ型：" + typeof value);

});

最初から項目を選択

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>最初から項目を選択するセレクトボックス</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

  <!-- JavaScriptファイル -->
  <script src="script.js" defer></script>

</head>
<body>

  <!-- セレクトボックス全体 -->
  <div class="basic-select-box_wrap">

    <!-- 入力項目のラベル -->
    <label class="basic-select-box_label" for="basic-select-box-second">
      都道府県
    </label>

    <!-- セレクトボックスと矢印 -->
    <div class="basic-select-box_select-wrap">

      <!--
        選択肢はoption要素で設定します。
        value属性には選択時に取得する値を指定します。

        selected属性を付けた項目が最初から選択されます。
        selected属性をすべて外すと、一番上の「北海道」が初期選択されます。
      -->
      <select class="basic-select-box_select" id="basic-select-box-second" name="prefecture">

        <option value="北海道">北海道</option>
        <option value="東京都" selected>東京都</option>
        <option value="大阪府">大阪府</option>
        <option value="福岡県">福岡県</option>

      </select>

      <!-- セレクトボックス右端の下向き矢印 -->
      <svg class="basic-select-box_arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="m5 9 7 7 7-7"/>
      </svg>

    </div>

  </div>

</body>
</html>

/* セレクトボックス全体 */
.basic-select-box_wrap {
  width: 100%; /* 親要素の横幅に合わせる */
  max-width: 680px; /* 最大横幅。値を大きくすると横に広がる */
  margin: 0 auto; /* 左右中央に配置 */
  font-family: sans-serif; /* 使用するフォント */
}

/* 入力項目のラベル */
.basic-select-box_label {
  display: block; /* セレクトボックスの上に表示 */
  margin-bottom: 10px; /* ラベルとセレクトボックスの間隔 */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
}

/* セレクトボックスと矢印を配置する領域 */
.basic-select-box_select-wrap {
  position: relative; /* 矢印の配置基準 */
  width: 100%; /* 親要素の横幅に合わせる */
}

/* セレクトボックス本体 */
.basic-select-box_select {
  width: 100%; /* 横幅いっぱいに表示 */
  padding: 16px 52px 16px 16px; /* 内側の余白。右側は矢印のスペース */
  border: 2px solid #dbe5f1; /* 枠線の太さと色 */
  border-radius: 12px; /* 角丸。値を大きくすると丸みが強くなる */
  background: #ffffff; /* 背景色 */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  line-height: 1.5; /* 行間 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  appearance: none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance: none; /* Safari対応 */
  cursor: pointer; /* マウスを重ねたときのカーソル */
}

/* フォーカス時の表示 */
.basic-select-box_select:focus {
  border-color: #2563eb; /* 選択中の枠線の色 */
  outline: 3px solid rgba(37, 99, 235, 0.18); /* 外側の強調枠 */
}

/* セレクトボックス右端のSVG矢印 */
.basic-select-box_arrow {
  position: absolute; /* セレクトボックスの上に重ねる */
  top: 50%; /* 上下中央の位置 */
  right: 18px; /* 右端からの距離 */
  display: block; /* SVGの表示形式 */
  width: 20px; /* 矢印の横幅 */
  height: 20px; /* 矢印の高さ */
  color: #64748b; /* 矢印の色 */
  transform: translateY(-50%); /* 矢印を上下中央に揃える */
  pointer-events: none; /* 矢印の上からでも選択操作できるようにする */
}

/* 画面幅640px以下 */
@media (max-width: 640px) {

  /* スマートフォンでの内側余白 */
  .basic-select-box_select {
    padding: 14px 50px 14px 14px; /* 上下左右の余白を調整 */
  }

}

/* =========================================
   セレクトボックスの値を取得
========================================= */

/* セレクトボックスを取得 */
const select = document.getElementById("basic-select-box-second");

/* 初期状態の値を取得 */
let value = select.value;

/* 選択項目が変更されたときの処理 */
select.addEventListener("change", function () {

  /* 選択されたoption要素のvalue属性を取得 */
  value = select.value;

  /* 取得した値をコンソールに表示 */
  console.log("取得した値：" + value);

  /* 変数の内容を表示 */
  console.log("value = " + JSON.stringify(value) + ";");

  /* データ型を表示 */
  console.log("データ型：" + typeof value);

});

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

今回は、初期表示が異なる2種類のセレクトボックスを用意しています。①は「選択してください」を表示し、②は最初から「東京都」が選択された状態になります。それぞれ独立したサンプルとしてダウンロードでき、HTMLで選択肢と初期状態を設定し、CSSで見た目を整え、JavaScriptで選択された値を取得します。どちらも同じファイル構成ですが、HTMLの初期設定とJavaScriptの取得対象が異なります。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlには、都道府県を選択するセレクトボックスとSVGの矢印を配置しています。style.cssでは、セレクトボックスの横幅・枠線・角丸・文字サイズなどを設定しています。script.jsでは、選択された都道府県の値を取得し、ブラウザのコンソールへ表示します。

設置方法・使い方
使用したいサンプルの「サンプル一式をダウンロード」をクリックし、ZIPファイルを展開してください。sampleフォルダ内のindex.htmlをブラウザで開くと、セレクトボックスが表示されます。2種類のサンプルは独立しているため、両方を設置する必要はありません。

初期表示を変更する方法
①のサンプルでは、最初のoption要素にvalue=””・selected・disabledを指定しています。value=””は選択された値を空文字列にし、selectedは初期表示する項目を指定します。disabledは、一度ほかの項目を選んだあとに「選択してください」を再選択できないようにするための設定です。

<option value="" selected disabled>選択してください</option>

②のサンプルでは、「東京都」のoption要素にselected属性を指定しています。この属性を「大阪府」など別の項目へ移動すると、最初に選択される都道府県を変更できます。また、selected属性をすべて削除すると、一番上の「北海道」が自動的に初期選択されます。

<option value="北海道">北海道</option>
<option value="東京都" selected>東京都</option>
<option value="大阪府">大阪府</option>
<option value="福岡県">福岡県</option>

選択した値を取得する仕組み
各option要素のvalue属性には、選択時に取得する値を設定しています。例えば「東京都」を選択すると、select.valueによって文字列の「東京都」を取得できます。script.jsでは、取得した値を変数valueに格納し、選択項目が変更されるたびに更新しています。

/* 初期状態の値を取得 */
let value = select.value;

/* 選択項目が変更されたときの処理 */
select.addEventListener("change", function () {

  /* 選択されたoption要素のvalue属性を取得 */
  value = select.value;

  /* 取得した値をコンソールに表示 */
  console.log("取得した値：" + value);

  /* 変数の内容を表示 */
  console.log("value = " + JSON.stringify(value) + ";");

  /* データ型を表示 */
  console.log("データ型：" + typeof value);

});

例えば「東京都」を選択すると、変数valueには「東京都」が格納され、コンソールには取得した値・変数の内容・データ型が表示されます。セレクトボックスから取得した値は、日本語でもstring（文字列）です。なお、①の「選択してください」が表示されている初期状態では、value=””によって取得値は空文字列になります。現在のscript.jsは初期値を変数へ格納しますが、コンソールへの表示は選択項目を変更したときに実行されます。

カスタマイズできる内容
選択肢を変更する場合は、index.htmlのoption要素を編集してください。表示する文字とvalue属性の値は、それぞれ変更できます。最初に表示する項目はselected属性で指定でき、選択肢の追加や削除も可能です。矢印の形状はindex.html内のSVGで変更でき、色や大きさはstyle.cssの.basic-select-box_arrowで調整できます。

数値調整
style.cssのmax-width: 680px;はセレクトボックス全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。border-radius: 12px;は角丸の大きさで、値を大きくすると丸みが強くなります。また、padding: 16px 52px 16px 16px;では内側の余白を調整でき、右側の52pxは矢印を配置するためのスペースです。

レスポンシブ対応
style.cssではwidth: 100%;とmax-width: 680px;を組み合わせ、画面幅に合わせてセレクトボックスの横幅が変化するようにしています。また、画面幅640px以下ではメディアクエリによって内側の余白を調整し、スマートフォンでも操作しやすい表示にしています。