ラジオボタンを画像に置き換える

ラジオボタンを画像に置き換えるのに苦労したのでメモ。

晴れ雨曇り

通常のラジオボタンだと上記のような感じ。

この◯部分をなくし、画像に置き換えたいという事で、試行錯誤。

参考にさせていただいたサイトは以下のところ。
http://ameblo.jp/daisuke-sole/entry-11541775812.html

まずはhtml。

<p>
<input type="radio" value="1" name="radio" id="hare" checked="checked">晴れ
<input type="radio" value="2" name="radio" id="ame">雨
<input type="radio" value="2" name="radio" id="kumori">曇り
</p>

次にcss

#hare {
    background: url(hare.png);
    background-size: 25px 25px;
}
#ame {
    background: url(ame.png);
    background-size: 25px 25px;
}
#kumori {
    background: url(kumori.png);
    background-size: 25px 25px;
}
input[type="radio"] {
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	width: 25px;
	height: 25px;
}
input[type="radio"]:checked:before{
	content:"";
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 25px;
	box-shadow: 0px 0px 0px 1px red;　//チェック済画像を赤線で囲む
}

ちなみに値を取得する場合jqueryでやると

$('#:input:checked').val();

一応こんな感じで完成。無駄ありそうな気がするけど。