【初心者向け】CSSだけでselect（プルダウン）をカスタマイズする方法｜矢印・初期値・見た目を統一しよう

はじめに

selectタグの見た目、気になったことはありませんか？

フォームでよく使う「プルダウンメニュー（selectタグ）」。
でも、同じコードでもブラウザやOSによって見た目がバラバラで、「なんかダサい…」と思ったことはありませんか？

「サイト全体のデザインに合わせたい」「他のパーツと統一感を出したい」そんなときにおすすめなのが、CSSだけでプルダウンをカスタマイズする方法です。

なぜCSSでカスタマイズしたくなるのか

• デフォルトの矢印アイコンが古くさく見える
• デザイン性のあるUIを実現したい
• JavaScriptを使わず、軽くシンプルにしたい

この記事では、CSSだけでselect要素をカスタマイズする具体的な方法と、実装の注意点をわかりやすく解説します。

---

CSSだけでselectをカスタマイズする基本の考え方

各ブラウザ・OSで見た目が違う理由

selectタグは、各OSのネイティブUIに依存しているため、Windows・Mac・iOS・Android・ブラウザごとに表示が異なります。
特にモバイル端末ではOS標準の見た目が強制されることもあります。

CSSでどこまで変えられる？

CSSだけで可能なのは以下のような変更です：

• 矢印アイコンの表示切替（非表示・差し替え）
• フォントサイズ、枠線、背景色などの基本スタイル
• 初期値の非表示

ただし、ドロップダウンリスト（optionの表示部分）の装飾までは基本的に不可です。
ただし、Firefoxでは一部のプロパティ（colorやbackground-color）が反映されることもあります。

JavaScriptなしでできること・できないこと

項目	CSSだけで可能？
見た目の変更（枠・フォント等）	◯
矢印の非表示・カスタム	◯（擬似要素利用）
リストの中身の装飾（option）	✕（※Firefoxでは一部可能）
選択中の項目の文字色変更	◯（一部制限あり）
モバイル表示の完全統一	✕

---

実装サンプル｜CSSでselectの見た目を整える方法

See the Pen select-css by take it easy (@take-it-easy) on CodePen.

HTMLの基本構造と初期値の設定

<div class="select-area">
  <select>
    <option value="0" selected disabled>選択してください</option>
    <option value="40">福岡県</option>
    <option value="41">佐賀県</option>
    <option value="42">長崎県</option>
    <option value="43">熊本県</option>
    <option value="44">大分県</option>
    <option value="45">宮崎県</option>
    <option value="46">鹿児島県</option>
    <option value="47">沖縄県</option>
  </select>
</div>

ポイント：

• 初期表示用の項目に selected disabled を設定し、リストには表示させない

CSSの書き方と解説（appearance: noneの活用）

*:focus {
  outline: none;
}

.select-area {
  position: relative;
  display: inline-block;
}

.select-area select {
  position: absolute;
  left: 5px;
  appearance: none;
  -webkit-appearance: none; /* Safari、Chrome用 */
  -moz-appearance: none;    /* Firefox用 */
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  width: 200px;
  font-size: 16px;
  padding: 5px;
  background: transparent;
  z-index: 2;
}

.select-area::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f107";
  font-weight: 600;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 8px;
  left: 190px;
  pointer-events: none;
  z-index: 1;
}

option[selected][disabled] {
  display: none;
}

select:-ms-expand {
  display: none; /* 旧IE・旧Edgeでの矢印非表示用（現在はほとんど不要） */
}

💡 appearance の詳細についてはMDN公式ドキュメント を参照してください。

Font Awesomeを使って矢印アイコンを差し替えています。
CDNの読み込みも忘れないようにしてください。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

optionの初期表示を制御するテクニック

• selected disabled の併用で「選択してください」を強制初期表示
• display: none; をCSSで指定すれば選択肢からは除外できる

---

補足｜実装時の注意点と改善のヒント

モバイルブラウザではデザインが効かない場合も

iOSやAndroidでは、selectタグのネイティブ表示が強制されるため、CSSでカスタムしても反映されないことがあります。
この場合、JavaScriptライブラリの導入も検討しましょう。

アクセシビリティへの配慮は必要？

カスタムスタイルを当てすぎると、

• キーボード操作できない
• スクリーンリーダーで読み上げられない

といった問題が起きる可能性があります。

<label>の適切な関連付けや、色のコントラスト、タブ操作での移動などにも注意しましょう。

カスタマイズ用ライブラリとの違いと併用の検討

より高度な見た目や選択肢の装飾を行いたい場合は、

• Choices.js
• Select2

といったライブラリの使用が適しています。

---

よくある質問（FAQ）

---

まとめ

CSSだけでも、select要素の見た目をかなり整えることができます。特に、

• デザインの統一感を出したい
• 矢印をカスタマイズしたい
• 初期値の表示を制御したい

といった要望には対応可能です。

ただし、option自体の装飾やモバイル対応には限界があるため、目的と対象環境に応じて使い分けることが大切です。