cssと画像のみ！フォームの選択項目を装飾する方法

ラジオ項目１


ラジオ項目２



チェック項目１


チェック項目２

1）input自体を消す

まずデフォルトの表示をdisplay:noneで消します。

/*　デフォルト表示を消す　*/
input[type="radio"],
input[type="checkbox"] {
	display:none;
}

2）背景画像を指定

次に隣接セレクタを使用し、label要素に背景画像を指定します。

/*　ラジオボタン 未選択時の背景指定　*/
input[type="radio"] + label {
	padding:3px 0 3px 30px;
	background:url(ラジオボタンの画像.png) no-repeat left center;
	background-size:27px 27px;
	cursor:pointer;
}

/*　ラジオボタン 選択時の背景指定　*/
input[type="radio"]:checked + label {
	background:url(ラジオボタンチェック時の画像.png) no-repeat left center;
	background-size:27px 27px;
	cursor:pointer;
}


/*　チェックボックス 未選択時の背景指定　*/
input[type="checkbox"] + label {
	padding:3px 0 3px 30px;
	background:url(チェックボックスの画像.png) no-repeat left center;
	background-size:27px 27px;
	cursor:pointer;
}

/*　チェックボックス 選択時の背景指定　*/
input[type="checkbox"]:checked + label {
	background:url(チェックボックスチェック時の画像.png) no-repeat left center;
	background-size:27px 27px;
	cursor:pointer;
}

選択してください
セレクト項目１
セレクト項目２
セレクト項目３

1）矢印を消す

まずデフォルトで表示される右の三角をappearance属性を使って消してしまいます。

appearanceプロパティは、ユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI（ユーザーインターフェース）のような外観になるよう指定する際に使用します。

appearance属性を簡単に説明すると、そのセレクタが持つデフォルトの表示を別のセレクタのデフォルト表示に見た目を変えられる指定です。
今回のようにappearance:noneでselectの右にでる▼マークを一度非表示にして装飾をしやすくするなど、主に装飾する際に使われるんだと思います。selectにappearance:radioを指定して、セレクトなのに見た目がラジオボタンなんて変な指定も可能ですｗ

ということで以下の指定をします。

select {
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

Firefoxにも適用させるためには以下も指定する必要があるようです。
そもそも昔はベンダープレフィックスだけで効いていたのですが、いつからか効かなくなってしまったようです。（Firefox31からという噂）

select {
	text-indent:.01px; /* Firefox用 */
    text-overflow:""; /* Firefox用 */
}

2）オリジナル画像を背景に指定する

ということで、Firefoxまで対応したcssと、背景画像を指定した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;
}

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