Written by Kasumi

【CSS】select(セレクト)要素の矢印を消して画像にする方法

select要素にデフォルトのスタイルである矢印を消して、任意の画像に変更したい。

この様な悩みを解決します。

本記事では、CSSを使って、select要素のデフォルトスタイルである矢印を消し、画像にする方法について解説します。

appearanceプロパティをselect要素に付与し矢印を消す

  select {
    -webkit-appearance: none;
    appearance: none;
  }
  select::-ms-expand {
    -webkit-appearance: none;
    appearance: none;
  }

select要素にappearance: none;を付与する事で、デフォルト矢印を消すことができます。

上記だけだとIEブラウザで反映されないので、select::-ms-expandを追加することでIEも矢印を非表示にできます。

select要素に任意の矢印画像を付与

  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url(../arrow03.png);
    background-size: 9px 6px;
    background-repeat: no-repeat;
    background-position: center right 10px;
  }
  select::-ms-expand {
    -webkit-appearance: none;
    appearance: none;
  }

あとはselect要素にbackground-image、background-size、background-repeat、background-positionを使って矢印を背景画像として設置してあげればOKです。

以上で完成です。

まとめ

select要素の矢印スタイルは、使用するブラウザより異なる表示になるので、本記事のやり方で任意のスタイルに統一しても良いかも知れません。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

スクロールバーをiphone、ipadでも常に表示しとく方法

更新日:2022.11.01
4962
プログラミング

映画ターミネーター ニュー・フェイトのあらすじ・感想を解説。2の続編!【最後にネタバレ有り】

2020.03.02
199
WordPress プログラミング

コンタクトフォーム7でフォーム送信後、完了ページへ遷移させる方法

2019.12.02
219
HTMLCSS WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
203