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

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

目次

関連記事

PHP プログラミング

Use of undefined constant campaign – assumed ‘文字列'(this will throw an Error in a future version of PHP) inエラーがでる場合の対処方法

2022.01.29
475
WordPress プログラミング

ワードプレスのツールバー(アドミンバー)を表示・非表示にする方法

2020.05.29
414
HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
513
WordPress プログラミング

【wordpress】全テンプレートページで使用可能なグローバル変数を定義する方法【簡単】

2022.02.23
1910