【CSS】フォームのセレクトボックスに角丸などのスタイルを適用する

概要

フォーム要素の<select>のスタイルを変更するため、元のスタイルを非表示にしてからスタイルを適用した。元のスタイルを表示しない場合矢印も消えるため、独自の矢印を表示する方法もあわせて調べた。

デフォルトの<select>は以下のようになる。

HTML

<select name="sample" id="select" class="select">
  <option value="" default></option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
</select>

そのままスタイルを変更してみる

デフォルトのスタイルから、

• 幅・高さ
• 枠線の色や太さ・角丸
• 背景色
• 文字の色や大きさ

を変更してみる。

SCSS

.select {
  width: 150px;
  height: 50px;
  border: 3px solid #FF0000;
  border-radius: 20px;
  background-color: #FFFF00;
  color: #0000FF;
  font-size: 20px;
}

　　　　　←Chrome　Firefox→

Chromeの場合は角がborder-radiusで指定した値になっていない（他の値を指定しても変わらず）。
Firefoxでは、矢印部分が違和感のあるスタイルになってしまう。

<select>のスタイルを消す

そこで、元々の<select>のスタイルが表示されないようにして、その上から好きなスタイルを適用することにする。
appearance: none;を指定することで元々のスタイルを無効にできる（ベンダープレフィックスが必要）。

SCSS

.select {
  &::-ms-expand {
    display: none; // IE
  }

  -webkit-appearance: none; // Chrome, Safari (Firefoxでも効いた)
  -moz-appearance: none; // Firefox
  appearance: none;

  border: 3px solid #FF0000;
  border-radius: 20px;
  width: 150px;
  height: 50px;
  background-color: #FFFF00;
  color: #0000FF;
  font-size: 20px;
}

　　　　　←Chrome　Firefox→

これで、意図したスタイルを適用できるようになった。

再び矢印を表示する

元々のスタイルを打ち消したことで、矢印が表示されなくなり、セレクトボックスかどうか少し分かりづらくなった。そこで、改めてそれっぽい矢印を表示することにする。
::beforeや::afterで作成するのが簡単だが、<select>には追加できない。そのため、<div>等で<select>を囲み、その<div>に擬似要素を追加する。

SCSS

.select-container { // div要素
  overflow: hidden;
  position: relative; // ::before要素をabsoluteで表示するため

  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "▼"; // これだけでもそれっぽい下三角矢印にできる
  }

  border: 3px solid #FF0000;
  border-radius: 20px;
  width: 150px;
  height: 50px;

  .select {
    width: 100%;
    height: 100%;

    &::-ms-expand {
      display: none;
    }

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background: #FF0000;
    border: none; // noneにしないと見えてしまう
    padding: 0 20px;
    color: #0000FF;
    font-size: 20px;
  }
}

<select>のwidthやheightを指定しない場合、以下のようになってしまう。

borderで三角を作る

::beforeや::afterのborderを利用して、矢印を表示してみる。
要素のwidth・heightを0にしてborderを表示すると、以下のように三角ができる。

SCSS

  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid #555555;
    border-left: 15px solid #FF00FF;
    border-right: 15px solid #ABCDEF;
    border-bottom: 15px solid #000000;
  }

これを利用して、下三角矢印を表示する。

SCSS

.select-container {
  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid #555555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}

2つ組み合わせて上下矢印を作成することもできる。

SCSS

.select-container {
  &::before {
    position: absolute;
    top: 27%;
    right: 15px;
    content: "";
    width: 0;
    height: 0;
    border-bottom: 10px solid #00FF00;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }
  
  &::after {
    position: absolute;
    top: 54%;
    right: 15px;
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid #00FFFF;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }
}

矢印部分をクリックできるようにする

現状では、矢印部分をクリックしても<select>が反応しない。

そこで、pointer-events: none;を指定して擬似要素のクリックを無効にする。

SCSS

.select-container {
  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "▼";
    pointer-events: none;
  }
}

矢印部分もクリックできるようになった。

まとめ

• appearance: none;で元の<select>のスタイルを表示しないようにして、新たにスタイルを適用した。
• 擬似要素で矢印を表示した。

最終形態

See the Pen select by mmmmk (@mmmmmmk) on CodePen.

参考