【CSS】select要素をcssで装飾

こんなときに

• selectボックスを以下のようなシンプルな見た目にしたい。
  

• ブラウザのデフォルトCSSを打ち消したい。

• 「▼」のために画像やWebフォントを導入するのはダルい。

コード

Pug

.wrap
  form(action="", method="post")
    .selectWrap
      select.select(name="select")
        option(value="1") item1
        option(value="2") item2
        option(value="3") item3
        option(value="4") item4

SCSS

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-color: #ddd;
}

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

  font-size: 30px;
  width: 104px;
}

.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}

解説

ポイント

• 疑似要素を使用。テキストの「▼」を使う。
• **selectに擬似要素はつかない。**外側に疑似要素用のdiv（.selectWrap）を用意する。
• 疑似要素部分はデフォルトではクリックに反応しない、pointer-events: none;を適用すべし。

既存スタイルの打ち消し

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

	//略
}

疑似要素をつける

.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}

疑似要素は、select外側のdivに指定。
位置をabsoluteでselect要素の範囲内、真横に持ってくる。

pointer-events: none; をつけると、▼を押して反応する。

実装サンプル

参考

フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社
－HTMLタグリファレンス
フォーム要素のスタイルをリセットする | cly7796.net