ラジオボタンコントロールに画像を使ったデザインに変更する方法

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<style>
		fieldset {border:none;}
		fieldset table{
		border:none;
		width:30%;
		padding:10px;
		}
		fieldset table td {width:50px;}
		fieldset table td label{
		position : relative;
		width : 30px;
		height : 30px;
		overflow : hidden;
		cursor : pointer;
		}
		fieldset table td label:before {
		content : '';
		display : block;
		width : 30px;
		height : 30px;
		border-radius : 100%;
		position : absolute;
		z-index : 1;
		}
		fieldset table td:nth-child(1) label:before{background:url(./yes.png)
		no-repeat;}
		fieldset table td:nth-child(2) label:before{background:url(./no.png)
		no-repeat;}
		fieldset table td:nth-child(3) label:before{background:url(./maybe.png)
		no-repeat;}
		fieldset table td label input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		margin : 0px;
		position : absolute;
		z-index : 2;
		left : -30px;
		width : 0px;
		height : 0px;
		display : block;
		box-shadow : 30px 0px 0 30px #fff;
		opacity : 0.7;
		}

		fieldset table td label input[type="radio"]:checked {
		box-shadow : none;
		opacity : 1;
		}
		fieldset table td label input[type="radio"]:focus {
		opacity : 0.0;
		}
		fieldset table td label input[type="radio"]:hover {
		box-shadow : 30px 0px 0 30px #fff;
		opacity : 0.5;
		}

	</style>

	<xp:radioGroup id="yesno">
		<xp:selectItem itemLabel="" itemValue="1">
		</xp:selectItem>
		<xp:selectItem itemLabel="" itemValue="0">
		</xp:selectItem>
		<xp:selectItem itemLabel="" itemValue="2">
		</xp:selectItem>
	</xp:radioGroup>
</xp:view>

Select XSnippet to copy to Clipboard