selectボックスに画像を配置する【HTML,CSS】

今回は、SELECTボックスに矢印を配置する方法。

SELECTボックスの仕様上、デフォルト表示されるOPTIONを表示する。OPTIONタグにimgタグを付与しとくのもありかもしれないが、表示したい画像が下方向を指す三角形だったら、SELECTボックスを開いた際に少し格好良くない。

また、背景を画像に設定すればと思うかもしれないが、SELECTボックスに背景色を設定すると、こちらも画像が無効化されてしまう。

というわけで、今回は、SELECTボックスに画像を配置する方法の紹介。

今回は、擬似クラスのbeforeを使用する。SELECTボックスの後の背景に表示したい画像を設定することで、解決する。

実装手順は下記。

1.ブラウザのデフォルトで指定されているセレクトボックスのスタイリングを無効にする

2.divでinputタグを囲い、divタグとinputタグの大きさを合わせる

3.divのbefore疑似クラスを作成し、でバックグラウンドに表示したい画像を配置する。

4.divクラスをposition:relative;に、疑似クラスをposition:absolute;にして、適切な位置に疑似クラスを配置する。

<div id="combo_box_wrapper">
   <select name="" id="combo_box">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
   </select>
</div>

#combo_box_wrapper{
    width: 180px;
    height: 50px;
    position: relative;
}

#combo_box_wrapper::before {
    content: "";
    background: url("http://rundevlog.com/wp-content/uploads/2025/02/arrow_drop_down_24dp_0000F5_FILL0_wght400_GRAD0_opsz24.png") no-repeat;
  background-size:cover;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}


#combo_box{
    width: 100%;
    height: 100%;
    background-color: #f9f9F9;
    border: #000000 2px solid;

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

関連