Blog

HOME > Web > css > 【CSS】selectのボタンを画像に変更

【CSS】selectのボタンを画像に変更

2016/06/13

css

備忘録です。

selectのボタンを画像に変更する方法についてです。

参考サイト
cssと画像のみ！フォームの選択項目を装飾する方法
CSSのappearanceを使ったセレクトボックスのカスタマイズ

appearance属性を使い、selectの背景に画像を指定する

html

<select id="item" name="item">
<option value="" selected="selected">選択してください</option>
<option value="1">セレクト項目１</option>
<option value="2">セレクト項目２</option>
<option value="3">セレクト項目３</option>
</select>

CSS

select {
    /*　矢印を消す　*/
    -webkit-appearance:none;
    -moz-appearance:none;
        text-indent: .01px; /* Firefox用 */
        text-overflow: ""; /* Firefox用 */
    appearance:none;
     
    /*　背景画像の指定　*/
    width:150px;
    height:50px;
    border:3px solid #CCC;
    border-radius:8px;
    padding-right:30px;
    background-color:#FFF;
    background-image:url(背景画像.gif);
    background-repeat:no-repeat;
    background-size:25px 54px;/*背景画像のサイズ*/
    background-position:right center;
    cursor:pointer;
}

IE未対応なので、IEの時はbackground-image:none;にする指定（IE10以上対応）

/*　IE11,IE10　*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.formSample select:not(:target) {
    padding-right:0;
    background-image:none;
}
}

またはIE10以降であれば、「-ms-expand」疑似要素を使えばselectの矢印ボタンを非表示にすることができます。

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



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ