セレクトボックスの見た目をカスタマイズする方法【HTML/CSS・サンプルコード付き】

セレクトボックス

セレクトボックスの見た目をカスタマイズする方法

セレクトボックスの見た目をカスタマイズする方法を紹介します。HTMLとCSSを使って、角丸、影、枠線を設定し、シンプルなセレクトボックスをデザイン性のあるフォームへ変更するサンプルです。JavaScriptは使用せず、CSSだけで見た目を調整できるため、既存のフォームへも導入しやすくなっています。

このサンプルでは、border-radiusで角丸を付け、box-shadowで立体感のある影を追加し、borderで枠線の太さや色を設定しています。それぞれの数値を変更することで、やわらかいデザインやシャープなデザインなど、サイトの雰囲気に合わせて自由に調整できます。

お問い合わせ画面、会員サイト、ECサイト、管理画面など、さまざまなフォームで利用できます。CSS内の数値や色を変更するだけで簡単にデザインを変更できるため、初心者でもカスタマイズしやすく、オリジナルデザインのセレクトボックスを作成したい場合にもおすすめです。

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

デモ

セレクトボックスのデザイン変更

＋－ボタンを押すと、角丸・影・枠線がリアルタイムで変化します。

border-radius
box-shadow
border

現在適用されているCSSもリアルタイムで確認できます。

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

<!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="select-box-design">

    <!-- タイトル -->
    <h1 class="select-box-design_title">
      都道府県を選択
    </h1>

    <!-- 説明文 -->
    <p class="select-box-design_text">
      角丸・影・枠線をカスタマイズしたセレクトボックスです。
    </p>

    <!-- ラベル -->
    <label
      class="select-box-design_label"
      for="prefecture">
      都道府県
    </label>

    <!-- セレクトボックスを囲む要素 -->
    <div class="select-box-design_wrap">

      <!-- セレクトボックス -->
      <select
        id="prefecture"
        name="prefecture"
        class="select-box-design_select">

        <!-- 初期表示 -->
        <option value="">
          選択してください
        </option>

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

      </select>

    </div>

  </div>

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。セレクトボックスの見た目をリアルタイムで変更できるデモで、border-radius（角丸）、box-shadow（影）、border（枠線）の数値をボタン操作で変更し、その場でデザインの違いを確認できます。現在適用されているCSSも同時に表示されるため、数値を変更した際の効果を視覚的に確認しながら学習できます。 

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

各ファイルの役割
index.htmlはセレクトボックスや数値変更ボタン、現在のCSSを表示するエリアを配置しています。
style.cssはレイアウトや配色、セレクトボックスの初期デザインを設定しています。
script.jsは＋・－ボタンのクリック処理を担当し、border-radius・box-shadow・borderの数値を変更して、セレクトボックスとCSS表示をリアルタイムで更新します。

設置方法・使い方
sampleフォルダへ3ファイルを配置し、index.htmlをブラウザで開くだけで利用できます。＋・－ボタンをクリックするとデザインが即座に反映され、現在適用されているCSSも確認できます。最後に「初期値へ戻す」を押すと、すべての設定を初期状態へ戻せます。

カスタマイズできる内容
style.cssではセレクトボックスの背景色・文字色・余白・フォントサイズ・初期の角丸・影・枠線の色を変更できます。
script.jsでは各ボタンで増減する数値の幅や、最小値・最大値を自由に変更できます。
index.htmlではラベル名、セレクトボックス内の項目、説明文などを用途に合わせて編集できます。

数値調整
script.jsではborder-radius・box-shadow・borderの数値を変更しています。
border-radiusは角丸の大きさを表し、値を大きくすると丸みが強くなります。
box-shadowは影の強さを表し、値を大きくすると影が広がります。
borderは枠線の太さを表し、値を大きくすると枠線が太く表示されます。
style.cssのtransition:0.2s;はデザイン変更時のアニメーション時間です。0.2秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
style.cssではmedia queryを使用し、768px以下で操作パネルとプレビューを縦並びへ変更しています。また、width:100%、max-width、paddingを利用してスマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。

こちらもおすすめ

セレクトボックス
セレクトボックスのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント