HTML・CSS・JavaScriptで作るセレクトボックス（ドロップダウン）の基本と応用

Webサイトでよく目にする「セレクトボックス（ドロップダウン）」は、フォームの中でも定番のパーツです。ユーザーが一覧から選択肢を選ぶシンプルな操作ができるため、アンケートや問い合わせフォームなどさまざまな場面で使われています。本記事では、HTML・CSS・JavaScriptを使ってセレクトボックスを作成する方法を基礎から解説し、見た目のカスタマイズや動的な動作の追加方法も紹介します。初心者でもすぐに実践できる内容になっていますので、ぜひ参考にしてみてください。

HTMLでセレクトボックスを作る基本

セレクトボックスは、<select>要素とその中に含まれる<option>要素を使って作成します。以下は最も基本的なセレクトボックスの例です。

<label for="fruits">好きな果物を選んでください：</label>
<select id="fruits" name="fruits">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="grape">ぶどう</option>
  <option value="orange">オレンジ</option>
</select>

<select>タグはドロップダウンの外枠を作り、<option>タグがそれぞれの選択肢です。value属性はサーバーに送信されるデータとなります。

CSSでセレクトボックスを見た目カスタマイズ

セレクトボックスはブラウザによってデザインが異なるため、CSSで自分好みに調整することも可能です。ただし、完全に自由なデザインにするのは制限があるため注意が必要です。

以下は基本的なカスタマイズの例です。

select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-size: 16px;
}

さらに、hoverやfocus時の装飾も追加できます。

select:hover {
  border-color: #888;
}

select:focus {
  border-color: #007BFF;
  outline: none;
}

JavaScriptでセレクトボックスの選択値を取得する方法

セレクトボックスの値をJavaScriptで取得して、動的に処理を行うことができます。たとえば、選択した果物をアラート表示するサンプルを以下に示します。

<select id="fruits">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="grape">ぶどう</option>
</select>
<button onclick="showSelected()">選んだ果物を表示</button>

<script>
  function showSelected() {
    const select = document.getElementById("fruits");
    const selectedValue = select.value;
    alert("選んだ果物は: " + selectedValue);
  }
</script>

このように、select.valueを使えば、現在選ばれている選択肢の値を簡単に取得できます。

JavaScriptでセレクトボックスの中身を動的に変更する

選択肢をJavaScriptで動的に変更したい場合もあります。例えば、ボタンをクリックすると新しい選択肢が追加されるような機能も実装可能です。

<select id="fruits">
  <option value="apple">りんご</option>
</select>
<button onclick="addOption()">選択肢を追加</button>

<script>
  function addOption() {
    const select = document.getElementById("fruits");
    const option = document.createElement("option");
    option.value = "banana";
    option.text = "バナナ";
    select.appendChild(option);
  }
</script>

この例では、新しい<option>要素を作成し、appendChild()で追加しています。

カスタムドロップダウンの作成（応用編）

よりリッチなUIが必要な場合、セレクトボックス風のカスタムドロップダウンをHTMLとCSS、JavaScriptで作る方法もあります。

<div class="custom-select-wrapper">
  <div class="custom-select" onclick="toggleDropdown()">選択してください</div>
  <ul class="custom-options" id="customOptions">
    <li onclick="selectItem('りんご')">りんご</li>
    <li onclick="selectItem('バナナ')">バナナ</li>
    <li onclick="selectItem('ぶどう')">ぶどう</li>
  </ul>
</div>

<style>
.custom-select-wrapper {
  position: relative;
  width: 200px;
}

.custom-select {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  cursor: pointer;
}

.custom-options {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  z-index: 100;
}

.custom-options li {
  padding: 10px;
  cursor: pointer;
}

.custom-options li:hover {
  background-color: #f0f0f0;
}
</style>

<script>
  function toggleDropdown() {
    const options = document.getElementById("customOptions");
    options.style.display = options.style.display === "block" ? "none" : "block";
  }

  function selectItem(value) {
    document.querySelector(".custom-select").textContent = value;
    document.getElementById("customOptions").style.display = "none";
  }

  // 外部クリックで閉じる
  window.addEventListener('click', function(e) {
    if (!document.querySelector('.custom-select-wrapper').contains(e.target)) {
      document.getElementById("customOptions").style.display = "none";
    }
  });
</script>

これにより、より柔軟なスタイリングが可能なカスタムUIを実現できます。

セレクトボックスでよくあるトラブルと対処法

プレースホルダーが効かない？

セレクトボックスにはplaceholder属性は使えませんが、代わりにdisabledかつselectedなダミーの<option>を用意することで実現可能です。

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

モバイルでスタイルが効かない？

iOSやAndroidでは、ブラウザの仕様上スタイルが制限されることがあります。カスタムUIを導入するか、最低限の装飾で対応するのが無難です。

まとめ

セレクトボックスはフォームでよく使われる基本パーツですが、工夫次第でさまざまなデザインや機能を追加できます。HTMLでの基本実装から、CSSでの見た目の調整、JavaScriptによる動的制御まで幅広く対応できるので、ぜひ自分のプロジェクトに応じて活用してください。セレクトボックスをマスターすれば、よりユーザーに優しいフォーム作りができるようになります。

タイトルとURLをコピーしました