selectタグのスタイルをCSSでカスタマイズする

CSS

2024年04月05日2024年08月19日

フォームを使いやすくおしゃれなデザインにする場合、
扱いにくいのがselectタグです。

ちょっとしたコツを知ればselectタグのスタイルづけもカンタンなので、
今回はそれをまとめました。

さっそく実装！

つくったのは、このようなselectタグです。

どのような考え方でつくっていくか、ポイントをひとつずつ見ていきます。

ブラウザのデフォルトのスタイルをクリアする

まずは、ブラウザごとにデフォルトのスタイルが当たっていますので、それを打ち消します。
selectタグの打ち消しは、以下の記述でできます。

select {
  /* ブラウザのデフォルトのスタイルをクリアする */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

select {

/* ブラウザのデフォルトのスタイルをクリアする */

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

outline: none;

}

親要素で囲ってスタイル付けすると扱いやすい

selectタグはinline-blockの性質がデフォルトです。
大きさ自体は親要素で指定して（ここでは.wrapper）、
selectタグは親要素いっぱいに広がるようすると扱いやすいです。

また、selectタグは、直接擬似要素を付与することができません。
今回は矢印をつけたいので、
selectタグを親要素で囲い、親要素に対して擬似要素でスタイルづけする方法をとります。

select {
  /* サイズは親要素いっぱいになるようにすると扱いやすい */
  width: 100%;
  height: 100%;
}
/* 以下、親要素に設定
・サイズの指定
・擬似要素の指定 */
.wrapper{
  width: 300px;
  height: 60px;
  position: relative;
}

select {

/* サイズは親要素いっぱいになるようにすると扱いやすい */

width: 100%;

height: 100%;

}

/* 以下、親要素に設定

・サイズの指定

・擬似要素の指定 */

.wrapper{

width: 300px;

height: 60px;

position: relative;

}

準備が整ったところでスタイルづけ

ではいよいよスタイルをつけていきます。

selectタグに直接背景色やボーダー、テキストなどの指定をしていきますが、
先述の通り、デフォルトのスタイルはすべて取っ払っているので
矢印は任意でつける必要があります。
今回は、親要素に対して擬似要素::beforeで矢印をつけています。

select {
  /* 以下スタイルづけ */
  border: 2px solid #ff2e63;
  background-color: #fff5f4;
  border-radius: 5px;
  color: #ff2e63;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 5px 10px;
}
/* 擬似要素で矢印をつける */
.wrapper::before{
  content: "";
  border-top: 12px solid #ff2e63;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);  
}

select {

/* 以下スタイルづけ */

border: 2px solid #ff2e63;

background-color: #fff5f4;

border-radius: 5px;

color: #ff2e63;

font-size: 1.1rem;

font-weight: bold;

padding: 5px 10px;

}

/* 擬似要素で矢印をつける */

.wrapper::before{

content: "";

border-top: 12px solid #ff2e63;

border-right: 8px solid transparent;

border-left: 8px solid transparent;

position: absolute;

right: 15px;

top: 50%;

transform: translateY(-50%);

}

※CSSでつくる矢印は、こちらも参考にしてみてください。
→コピペでOK！画像を使わずCSSで三角形をつくる方法×2｜nico MEMO

まとめ

以上、selectタグのスタイルをCSSでカスタマイズする方法をご紹介しました。
ポイントは、

ブラウザのデフォルトのスタイルをクリアする
selectタグを親要素で囲う

の2点です。
これらを踏まえて、使いやすいフォーム作成にお役立てください！

ラジオボタンとチェックボックスについての記事も書いています。よかったらどうぞ！
【HTML】ラジオボタン（radio）とチェックボックス（checkbox）①基本的な使い方｜nico MEMO
【CSS】ラジオボタン（radio）とチェックボックス（checkbox）②見た目をカスタマイズ｜nico MEMO