クリックすると枠線を強調するドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

無料ツール

ドロップダウンメニューを自由に作成

ボタン・メニュー項目・サイズ・色・余白・枠線などを設定して、HTML・CSS・JavaScriptを自動生成できます。

ドロップダウンメニュー作成ツールを使う

新しいタブで開きます

クリックすると枠線を強調するドロップダウンメニューの作り方

ドロップダウンメニューを開いたときに、現在操作している項目を分かりやすく強調したい場合があります。枠線や背景色を変化させることで、どのドロップダウンを操作しているのか視覚的に伝えやすくなります。

このサンプルでは、ボタンをクリックしてドロップダウンメニューを開くと、枠線・背景色・外側のリング・影を使って操作中の項目を強調します。別のドロップダウンを開いた場合は、強調表示も新しく開いた項目へ移動します。

HTMLでボタンと選択肢を作成し、CSSで強調表示やメニューのデザインを設定します。JavaScriptではメニューの開閉、選択した項目の表示、選択状態の切り替え、外側をクリックしたときに閉じる処理を実装します。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

注文内容を選択

各ドロップダウンをクリックすると、操作中の項目だけが強く表示されます。

都道府県

配送方法

支払い方法

ドロップダウンを開くと、枠線・背景色・外側のリング・影によって操作中の項目が強調表示されます。

3つのドロップダウンを順番にクリックし、現在開いている項目だけが強調表示される動作を確認できます。

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

<!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">

</head>
<body>

  <!-- ドロップダウン全体 -->
  <div class="focus-border-dropdown">

    <!-- タイトル -->
    <div class="focus-border-dropdown_title">
      注文内容を選択
    </div>

    <!-- 説明文 -->
    <p class="focus-border-dropdown_text">
      各ドロップダウンをクリックすると、操作中の項目だけが強く表示されます。
    </p>

    <!-- ドロップダウン一覧 -->
    <div class="focus-border-dropdown_list">

      <!-- 都道府県 -->
      <div class="focus-border-dropdown_item">

        <div class="focus-border-dropdown_label">
          都道府県
        </div>

        <div class="focus-border-dropdown_wrap">

          <!-- 開閉ボタン -->
          <button
            class="focus-border-dropdown_button"
            type="button"
            aria-expanded="false">
            選択してください
          </button>

          <!-- 選択肢 -->
          <ul class="focus-border-dropdown_menu">

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                北海道
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                東京都
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                大阪府
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                福岡県
              </button>
            </li>

          </ul>

        </div>

      </div>

      <!-- 配送方法 -->
      <div class="focus-border-dropdown_item">

        <div class="focus-border-dropdown_label">
          配送方法
        </div>

        <div class="focus-border-dropdown_wrap">

          <!-- 開閉ボタン -->
          <button
            class="focus-border-dropdown_button"
            type="button"
            aria-expanded="false">
            選択してください
          </button>

          <!-- 選択肢 -->
          <ul class="focus-border-dropdown_menu">

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                通常配送
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                お急ぎ便
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                日時指定便
              </button>
            </li>

          </ul>

        </div>

      </div>

      <!-- 支払い方法 -->
      <div class="focus-border-dropdown_item">

        <div class="focus-border-dropdown_label">
          支払い方法
        </div>

        <div class="focus-border-dropdown_wrap">

          <!-- 開閉ボタン -->
          <button
            class="focus-border-dropdown_button"
            type="button"
            aria-expanded="false">
            選択してください
          </button>

          <!-- 選択肢 -->
          <ul class="focus-border-dropdown_menu">

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                クレジットカード
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                銀行振込
              </button>
            </li>

            <li class="focus-border-dropdown_option">
              <button
                class="focus-border-dropdown_option-button"
                type="button">
                代金引換
              </button>
            </li>

          </ul>

        </div>

      </div>

    </div>

    <!-- 補足文 -->
    <p class="focus-border-dropdown_note">
      ドロップダウンを開くと、枠線・背景色・外側のリング・影によって操作中の項目が強調表示されます。
    </p>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ドロップダウン全体 */
.focus-border-dropdown{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:720px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:36px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #dbe5f1; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.focus-border-dropdown_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.focus-border-dropdown_text{
  margin:0 0 30px; /* 下側30pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ドロップダウン一覧 */
.focus-border-dropdown_list{
  display:grid; /* 各項目を縦方向へ並べる */
  gap:24px; /* 各項目の間隔。値を大きくすると間隔が広がる */
}

/* 各項目 */
.focus-border-dropdown_item{
  position:relative; /* 子要素の配置基準にする */
  padding:20px; /* 項目内の余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #e2e8f0; /* 項目を囲む枠線 */
  border-radius:14px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
}

/* ラベル */
.focus-border-dropdown_label{
  display:block;
  margin-bottom:10px; /* ラベルとボタンの間隔 */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間 */
}

/* ボタンとメニューをまとめる要素 */
.focus-border-dropdown_wrap{
  position:relative; /* メニューをボタンの直下へ配置する基準 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* 開閉ボタン */
.focus-border-dropdown_button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:58px; /* ボタンの最小高さ。値を大きくすると高くなる */
  padding:14px 52px 14px 16px; /* 上下・右・左の内側余白 */
  border:2px solid #cbd5e1; /* 通常時の枠線 */
  border-radius:12px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  line-height:1.5; /* ボタン内の行間 */
  text-align:left; /* 文字を左揃えにする */
  cursor:pointer; /* マウスポインターを変更 */
  box-sizing:border-box;
  transition:
    border-color .2s,
    background-color .2s,
    box-shadow .2s,
    outline-color .2s;
  /*
    0.2秒で強調表示を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* 開閉ボタンの矢印 */
.focus-border-dropdown_button::after{
  content:"";
  position:absolute;
  top:50%;
  right:20px; /* ボタン右端からの距離。値を大きくすると左へ移動 */
  width:10px; /* 矢印の横幅 */
  height:10px; /* 矢印の高さ */
  border-right:2px solid #334155; /* 矢印を構成する線 */
  border-bottom:2px solid #334155; /* 矢印を構成する線 */
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s; /* 0.2秒で矢印の向きを切り替える */
  pointer-events:none;
}

/* メニューを開いたときの強調表示 */
.focus-border-dropdown_wrap.is-open
.focus-border-dropdown_button{
  border-color:#1d4ed8; /* 開いているボタンの枠線色 */
  background:#eff6ff; /* 開いているボタンの背景色 */
  box-shadow:
    0 0 0 5px rgba(37,99,235,.22),
    0 10px 24px rgba(37,99,235,.18);
  /*
    5pxは外側のリングの広がり。
    10pxと24pxは影の位置とぼかしの大きさ。
  */
  outline:3px solid #60a5fa; /* 外側の線。3pxを大きくすると太くなる */
  outline-offset:4px; /* ボタンと外側の線の間隔 */
}

/* メニューを開いたときの矢印 */
.focus-border-dropdown_wrap.is-open
.focus-border-dropdown_button::after{
  transform:translateY(-30%) rotate(225deg); /* 矢印を上向きに変更 */
}

/* ドロップダウンメニュー */
.focus-border-dropdown_menu{
  position:absolute;
  z-index:10; /* メニューを手前へ表示 */
  top:calc(100% + 12px); /* ボタン下から12px離して配置 */
  right:0;
  left:0;
  margin:0;
  padding:8px; /* メニュー内の余白 */
  border:1px solid #dbe5f1; /* メニューの枠線 */
  border-radius:12px; /* メニューの角丸 */
  background:#ffffff; /* メニューの背景色 */
  box-shadow:0 14px 30px rgba(15,23,42,.14); /* メニューの影 */
  list-style:none; /* リストのマーカーを非表示 */
  opacity:0; /* 閉じているときは透明 */
  visibility:hidden; /* 閉じているときは非表示 */
  transform:translateY(-8px); /* 閉じているときは8px上へ移動 */
  transition:
    opacity .2s,
    visibility .2s,
    transform .2s;
  /* 0.2秒でメニューの表示状態を切り替える */
}

/* メニュー表示時 */
.focus-border-dropdown_wrap.is-open
.focus-border-dropdown_menu{
  opacity:1; /* メニューを表示 */
  visibility:visible; /* 操作可能な状態にする */
  transform:translateY(0); /* 本来の位置へ移動 */
}

/* 選択肢 */
.focus-border-dropdown_option{
  margin:0; /* リスト項目の余白を削除 */
}

/* 選択肢のボタン */
.focus-border-dropdown_option-button{
  display:block;
  width:100%; /* メニューの横幅いっぱいに表示 */
  padding:13px 14px; /* 選択肢の内側余白 */
  border:none;
  border-radius:8px; /* 選択肢の角丸 */
  background:#ffffff; /* 選択肢の背景色 */
  color:#111827; /* 選択肢の文字色 */
  font:inherit;
  font-size:15px; /* 選択肢の文字サイズ */
  line-height:1.5;
  text-align:left;
  cursor:pointer;
}

/* 選択肢へマウスを重ねたとき */
.focus-border-dropdown_option-button:hover{
  background:#eff6ff; /* ホバー時の背景色 */
  color:#1d4ed8; /* ホバー時の文字色 */
}

/* 選択中の項目 */
.focus-border-dropdown_option-button.is-selected{
  background:#dbeafe; /* 選択中の背景色 */
  color:#1d4ed8; /* 選択中の文字色 */
  font-weight:700; /* 選択中の文字を太字にする */
}

/* 補足文 */
.focus-border-dropdown_note{
  margin:26px 0 0; /* 上側26pxの余白 */
  color:#64748b; /* 補足文の文字色 */
  font-size:15px; /* 補足文の文字サイズ */
  line-height:1.8; /* 補足文の行間 */
  text-align:center; /* 補足文を中央揃えにする */
}

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

  /* ページ全体 */
  body{
    padding:24px 12px; /* 小さい画面ではページ左右の余白を縮小 */
  }

  /* ドロップダウン全体 */
  .focus-border-dropdown{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を小さい画面向けに縮小 */
  }

  /* タイトル */
  .focus-border-dropdown_title{
    font-size:24px; /* 小さい画面ではタイトルを24pxへ縮小 */
  }

  /* 各項目 */
  .focus-border-dropdown_item{
    padding:18px 14px; /* 項目内の余白を縮小 */
  }

  /* 開閉ボタン */
  .focus-border-dropdown_button{
    padding:14px 50px 14px 14px; /* 小さい画面向けに左右余白を調整 */
  }

  /* 開閉ボタンの矢印 */
  .focus-border-dropdown_button::after{
    right:18px; /* 小さい画面では右端から18pxへ調整 */
  }

}

/* すべてのドロップダウンを取得 */
const focusBorderDropdownWraps=
  document.querySelectorAll(
    ".focus-border-dropdown_wrap"
  );

/* 各ドロップダウンへ処理を設定 */
focusBorderDropdownWraps.forEach(function(wrap){

  /* 開閉ボタンを取得 */
  const button=
    wrap.querySelector(
      ".focus-border-dropdown_button"
    );

  /* 選択肢をすべて取得 */
  const options=
    wrap.querySelectorAll(
      ".focus-border-dropdown_option-button"
    );

  /* 開閉ボタンをクリックしたとき */
  button.addEventListener("click",function(event){

    /* 外側クリックの処理が同時に実行されるのを防ぐ */
    event.stopPropagation();

    /* クリックしたもの以外のドロップダウンを閉じる */
    focusBorderDropdownWraps.forEach(function(otherWrap){

      if(otherWrap!==wrap){

        otherWrap.classList.remove("is-open");

        otherWrap
          .querySelector(
            ".focus-border-dropdown_button"
          )
          .setAttribute(
            "aria-expanded",
            "false"
          );

      }

    });

    /* クリックしたドロップダウンを開閉 */
    const isOpen=
      wrap.classList.toggle("is-open");

    /* 開閉状態をaria-expandedへ反映 */
    button.setAttribute(
      "aria-expanded",
      String(isOpen)
    );

  });

  /* 各選択肢へクリック処理を設定 */
  options.forEach(function(option){

    option.addEventListener("click",function(event){

      /* 外側クリックの処理が同時に実行されるのを防ぐ */
      event.stopPropagation();

      /* 同じドロップダウン内の選択状態を解除 */
      options.forEach(function(item){

        item.classList.remove("is-selected");

      });

      /* クリックした項目を選択状態にする */
      option.classList.add("is-selected");

      /* 選択した文字を開閉ボタンへ表示 */
      button.textContent=
        option.textContent.trim();

      /* 選択後にメニューを閉じる */
      wrap.classList.remove("is-open");

      /* 閉じた状態をaria-expandedへ反映 */
      button.setAttribute(
        "aria-expanded",
        "false"
      );

    });

  });

});

/* ドロップダウンの外側をクリックしたとき */
document.addEventListener("click",function(){

  /* 開いているすべてのドロップダウンを閉じる */
  focusBorderDropdownWraps.forEach(function(wrap){

    wrap.classList.remove("is-open");

    wrap
      .querySelector(
        ".focus-border-dropdown_button"
      )
      .setAttribute(
        "aria-expanded",
        "false"
      );

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「都道府県」「配送方法」「支払い方法」の3つのドロップダウンを作成し、CSSでは通常時のデザインと、メニューを開いたときに枠線・背景色・外側のリング・影を使って操作中の項目を強調するデザインを設定します。JavaScriptでは、ドロップダウンの開閉、選択内容の反映、選択状態の切り替え、外側をクリックしたときに閉じる処理を行います。

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

各ファイルの役割
index.htmlはドロップダウン全体を構成するファイルです。「注文内容を選択」のタイトル、説明文、「都道府県」「配送方法」「支払い方法」の項目名、それぞれの選択肢、補足文を変更できます。各ドロップダウンは開閉用のbutton要素と、選択肢を並べるul・li要素で構成されています。

style.cssはドロップダウンのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸のほか、開閉ボタン、矢印、ドロップダウンメニュー、選択肢のデザインを変更できます。メニューが開いているときは.is-openが付いた要素を対象に、開閉ボタンの枠線・背景色・外側のリング・影を変更して操作中の項目を強調します。

script.jsはドロップダウンの動作を設定するファイルです。開閉ボタンをクリックすると.is-openを付け外ししてメニューを開閉します。選択肢をクリックすると、その項目へ.is-selectedを付け、選択した文字を開閉ボタンへ反映してメニューを閉じます。また、別のドロップダウンを開いた場合は先に開いていたメニューを閉じ、ドロップダウンの外側をクリックした場合もすべてのメニューを閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。外部サービスや外部ライブラリは使用していないため、追加の設定は必要ありません。

表示された開閉ボタンをクリックすると、そのドロップダウンのメニューがボタンの下へ表示され、操作中のボタンが青い枠線・背景色・外側のリング・影で強調されます。選択肢をクリックすると選択した文字が開閉ボタンへ表示され、選択した項目の背景色と文字色も変化します。

カスタマイズできる内容
index.htmlでは、タイトル、説明文、項目名、選択肢、補足文を変更できます。たとえば「都道府県」の選択肢を変更したり、「配送方法」「支払い方法」を用途に合わせた別の項目へ変更したりできます。選択肢を増やす場合は、同じ.focus-border-dropdown_optionと.focus-border-dropdown_option-buttonの構造を追加します。

style.cssでは、ドロップダウン全体や各項目の横幅、余白、背景色、枠線、角丸、文字サイズを変更できます。.focus-border-dropdown_wrap.is-open .focus-border-dropdown_buttonでは、メニューを開いたときの枠線色、背景色、外側のリング、影を変更できます。また、選択肢のホバー時や選択中の背景色・文字色も調整できます。

数値調整
style.css
max-width:720px;
ドロップダウン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
ドロップダウン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:36px;
ドロップダウン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
ドロップダウン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:30px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

gap:24px;
3つのドロップダウン項目の間隔です。値を大きくすると項目同士が離れ、小さくすると間隔が狭くなります。

padding:20px;
各ドロップダウン項目の内側余白です。値を大きくするとラベルや開閉ボタンと外枠の間隔が広がります。

min-height:58px;
開閉ボタンの最小高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。

border:2px solid #cbd5e1;
開閉ボタンの通常時の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:12px;
開閉ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

right:20px;
開閉ボタン内に表示する矢印の右端からの距離です。値を大きくすると矢印が左へ移動し、小さくすると右端へ近づきます。

width:10px;・height:10px;
開閉ボタンに表示する矢印の大きさです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

transition:.2s;
強調表示や矢印、ドロップダウンメニューが切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

box-shadow:0 0 0 5px ...
メニューを開いたときに表示する外側のリングです。5pxを大きくするとリングの広がりが大きくなり、小さくすると控えめになります。

outline:3px solid #60a5fa;
メニューを開いたときに表示する外側の線です。3pxを大きくすると線が太くなり、小さくすると細くなります。

outline-offset:4px;
開閉ボタンと外側の線との間隔です。値を大きくすると線がボタンから離れ、小さくすると近づきます。

top:calc(100% + 12px);
開閉ボタンとドロップダウンメニューの間隔です。12pxを大きくするとメニューが下へ離れ、小さくするとボタンへ近づきます。

transform:translateY(-8px);
メニューが閉じている状態で上方向へ移動させる距離です。8pxを大きくすると表示時の移動量が大きくなり、小さくすると動きが控えめになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:720pxにより、画面幅に合わせてドロップダウン全体が縮小されます。また、640px以下ではメディアクエリによってページ全体の余白を24px 12px、ドロップダウン全体の余白を24px 18pxへ変更し、タイトルを24pxへ縮小します。各項目や開閉ボタン、矢印の余白も小さい画面向けに調整しているため、スマートフォン・タブレット・PCで利用できます。