クリックすると枠線を強調するセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】

クリックすると枠線を強調するセレクトボックスを作る方法

クリックすると枠線を強調するセレクトボックスを作る方法を紹介します。このサンプルでは3つのセレクトボックスを配置し、クリックやキーボード操作でフォーカスが当たった項目だけを強く目立たせます。通常時と操作中の状態を明確に分けることで、現在どの項目を入力しているのかを確認しやすくできます。

フォーカス時には枠線を濃い青色へ変更し、外側へ青いリングと影を表示します。さらに背景色も薄い青色へ切り替わるため、複数のセレクトボックスが並んでいても操作中の項目を見失いにくいデザインです。別のセレクトボックスを選ぶと、強調表示も新しくフォーカスされた項目へ移動します。

お問い合わせ画面、会員登録フォーム、ECサイトの注文画面、配送先設定、管理画面など、複数の選択項目を入力するフォームで利用できます。HTMLとCSSだけで実装でき、枠線色、強調リングの太さ、影の広がり、背景色、角丸なども用途に合わせて変更できます。マウス操作だけでなくキーボード操作でもフォーカス位置を確認しやすい構成です。

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

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

デモ

注文内容を選択

各セレクトボックスをクリックすると、操作中の項目だけが強く表示されます。

都道府県

配送方法

支払い方法

別のセレクトボックスをクリックすると、枠線・背景色・外側のリング・影による強調表示が移動します。

3つのセレクトボックスを順番にクリックし、現在フォーカスされている項目だけが強調表示される動作を確認できます。

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

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

  <!-- 文字コードをUTF-8へ設定 -->
  <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-select-box">

    <!-- フォームのタイトル -->
    <div class="focus-border-select-box_title">
      注文内容を選択
    </div>

    <!-- セレクトボックスの操作方法を案内する説明文 -->
    <p class="focus-border-select-box_text">
      操作中のセレクトボックスだけ枠線と外側のリングが強調されます。
    </p>

    <!-- 3つのセレクトボックスをまとめる一覧 -->
    <div class="focus-border-select-box_list">

      <!-- 都道府県の選択項目 -->
      <div class="focus-border-select-box_item">

        <!-- 都道府県セレクトボックスのラベル -->
        <label
          class="focus-border-select-box_label"
          for="prefecture">
          都道府県
        </label>

        <!-- 都道府県セレクトボックスと独自矢印を囲む要素 -->
        <div class="focus-border-select-box_wrap">

          <!-- 都道府県を選択するセレクトボックス -->
          <select
            class="focus-border-select-box_select"
            id="prefecture"
            name="prefecture">

            <!-- 初期表示する案内項目 -->
            <option value="">選択してください</option>

            <!-- 都道府県の選択肢 -->
            <option value="hokkaido">北海道</option>
            <option value="tokyo">東京都</option>
            <option value="osaka">大阪府</option>
            <option value="fukuoka">福岡県</option>

          </select>

        </div>

      </div>

      <!-- 配送方法の選択項目 -->
      <div class="focus-border-select-box_item">

        <!-- 配送方法セレクトボックスのラベル -->
        <label
          class="focus-border-select-box_label"
          for="delivery">
          配送方法
        </label>

        <!-- 配送方法セレクトボックスと独自矢印を囲む要素 -->
        <div class="focus-border-select-box_wrap">

          <!-- 配送方法を選択するセレクトボックス -->
          <select
            class="focus-border-select-box_select"
            id="delivery"
            name="delivery">

            <!-- 初期表示する案内項目 -->
            <option value="">選択してください</option>

            <!-- 配送方法の選択肢 -->
            <option value="normal">通常配送</option>
            <option value="express">お急ぎ便</option>
            <option value="date">日時指定便</option>

          </select>

        </div>

      </div>

      <!-- 支払い方法の選択項目 -->
      <div class="focus-border-select-box_item">

        <!-- 支払い方法セレクトボックスのラベル -->
        <label
          class="focus-border-select-box_label"
          for="payment">
          支払い方法
        </label>

        <!-- 支払い方法セレクトボックスと独自矢印を囲む要素 -->
        <div class="focus-border-select-box_wrap">

          <!-- 支払い方法を選択するセレクトボックス -->
          <select
            class="focus-border-select-box_select"
            id="payment"
            name="payment">

            <!-- 初期表示する案内項目 -->
            <option value="">選択してください</option>

            <!-- 支払い方法の選択肢 -->
            <option value="card">クレジットカード</option>
            <option value="bank">銀行振込</option>
            <option value="cod">代金引換</option>

          </select>

        </div>

      </div>

    </div>

    <!-- フォーカス表示の動作を説明する補足文 -->
    <p class="focus-border-select-box_note">
      別のセレクトボックスへ移動すると、強調表示も操作中の項目へ移動します。
    </p>

  </div>

</body>
</html>

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

/* フォーカス時に枠線を強調するセレクトボックス全体 */
.focus-border-select-box{
  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-select-box_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

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

/* 3つのセレクトボックスをまとめる一覧 */
.focus-border-select-box_list{
  display:grid; /* 各項目をグリッドで配置 */
  gap:24px; /* 項目同士の間隔。値を大きくすると縦方向の余白が広がる */
}

/* 各セレクトボックス項目 */
.focus-border-select-box_item{
  padding:20px; /* 項目内の余白。値を大きくするとラベルや入力欄との間隔が広がる */
  border:1px solid #e2e8f0; /* 項目を囲む枠線の太さ・種類・色 */
  border-radius:14px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* セレクトボックスのラベル */
.focus-border-select-box_label{
  display:block; /* ラベルを1行で表示 */
  margin-bottom:10px; /* 下側10pxの余白。値を大きくするとセレクトボックスとの間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間。値を大きくすると行間が広がる */
}

/* セレクトボックスと独自矢印を囲む要素 */
.focus-border-select-box_wrap{
  position:relative; /* 独自矢印をこの要素を基準に配置 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* セレクトボックス本体 */
.focus-border-select-box_select{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:16px 52px 16px 16px; /* 上下16px・右52px・左16pxの余白。右側を広くして文字と矢印の重なりを防ぐ */
  border:2px solid #cbd5e1; /* 通常時の枠線。最初の値を大きくすると枠線が太くなる */
  border-radius:12px; /* セレクトボックスの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 選択項目の文字色 */
  font-size:16px; /* 選択項目の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.5; /* 選択項目の行間。値を大きくすると行間が広がる */
  appearance:none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance:none; /* Safariでブラウザ標準の矢印を非表示 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s; /* 0.2秒で強調表示を滑らかに切り替える。値を大きくするとゆっくり変化する */
}

/* セレクトボックス右側の独自矢印 */
.focus-border-select-box_wrap::after{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* セレクトボックス上へ重ねて配置 */
  top:50%; /* 矢印を縦方向の中央へ配置 */
  right:20px; /* 右端から20px離して配置。値を大きくすると矢印が左へ移動する */
  width:10px; /* 矢印の横幅。値を大きくすると矢印が大きくなる */
  height:10px; /* 矢印の高さ。値を大きくすると矢印が大きくなる */
  border-right:2px solid #334155; /* 矢印右側の線の太さ・種類・色 */
  border-bottom:2px solid #334155; /* 矢印下側の線の太さ・種類・色 */
  transform:translateY(-70%) rotate(45deg); /* 縦位置を調整し、45度回転させて下向き矢印にする */
  pointer-events:none; /* 矢印がクリック操作を妨げないようにする */
}

/* セレクトボックスへフォーカスした状態 */
.focus-border-select-box_select:focus{
  border-color:#1d4ed8; /* フォーカス時の枠線色。濃い色へ変更すると操作中の項目が分かりやすくなる */
  background:#eff6ff; /* フォーカス時の背景色。通常時と区別できる薄い青色へ変更 */
  box-shadow:0 0 0 4px rgba(37,99,235,0.20); /* 外側へ4pxの強調リングを表示。3つ目の値を大きくするとリングが太くなり、最後の値を大きくすると色が濃くなる */
  outline:2px solid #60a5fa; /* キーボード操作でもフォーカス位置を確認できる外枠。最初の値を大きくすると外枠が太くなる */
  outline-offset:2px; /* セレクトボックスと外枠の間隔。値を大きくすると外側へ離れる */
}

/* 補足文 */
.focus-border-select-box_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; /* 上下24px・左右12pxへ縮小して画面を広く使う */
  }

  /* スマートフォン表示時の全体 */
  .focus-border-select-box{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小して画面内へ収める */
  }

  /* スマートフォン表示時のタイトル */
  .focus-border-select-box_title{
    font-size:24px; /* タイトルの文字サイズを24pxへ縮小 */
  }

  /* スマートフォン表示時の各項目 */
  .focus-border-select-box_item{
    padding:18px 14px; /* 上下18px・左右14pxへ縮小して画面内へ収める */
  }

  /* スマートフォン表示時のセレクトボックス */
  .focus-border-select-box_select{
    padding:14px 50px 14px 14px; /* 上下14px・右50px・左14pxへ縮小し、矢印用の余白を確保 */
  }

  /* スマートフォン表示時の独自矢印 */
  .focus-border-select-box_wrap::after{
    right:18px; /* 右端から18px離して配置。値を大きくすると矢印が左へ移動する */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。3つのセレクトボックスを配置し、クリックして操作中になった項目だけを枠線・背景色・外側のリングで強調表示します。HTMLのみでフォームを構成し、フォーカス時の見た目はCSSだけで実装しているため、JavaScriptを使用せずに導入できます。

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

各ファイルの役割
index.htmlはフォーム全体と3つのセレクトボックスを配置しています。ラベルや選択肢を編集すると、表示内容を自由に変更できます。
style.cssはレイアウトや配色、セレクトボックスのデザイン、フォーカス時の強調表示、レスポンシブ対応を設定しています。枠線や背景色、影などの見た目はすべてこのファイルで変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、index.htmlをブラウザで開くだけで利用できます。セレクトボックスをクリックすると、その項目だけが強調表示されます。別のセレクトボックスをクリックすると、強調表示も自動で移動します。

カスタマイズできる内容
style.cssではセレクトボックスの背景色、文字色、枠線の色、角丸、影、フォーカス時のリング、余白、文字サイズなどを変更できます。
index.htmlではラベル名や選択項目を自由に変更できるため、お問い合わせフォーム、会員登録画面、注文画面、管理画面など用途に合わせて利用できます。

数値調整
style.cssのborder:2px solidは通常時の枠線です。最初の数値を大きくすると枠線が太くなります。
border-radius:12px;は角丸の大きさです。値を大きくすると角が丸くなります。
box-shadow:0 0 0 4px rgba(…);はフォーカス時の強調リングです。3つ目の数値を大きくするとリングが太くなり、rgbaの最後の値を大きくすると色が濃くなります。
outline:2px solidはフォーカス時の外枠です。最初の数値を大きくすると外枠が太くなります。
transition:0.2s;はアニメーション時間です。0.2秒で切り替わり、値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
style.cssではmedia queryを使用し、640px以下で余白や文字サイズ、セレクトボックスの内側余白を調整しています。また、width:100%とmax-widthを使用しているため、スマートフォン・タブレット・PCでも画面幅に応じてレイアウトが崩れにくい構成になっています。