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

<?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>





CSSを駆使して標準のラジオボタンコントロールの見栄えを変更するためのサンプルです。
同NSFにyes.png, no.png, maybe.png を配置するとラジオボタンの丸ポチの代わりに画像が表示されるようになります。

XPages
kazut
August 28, 2016 at 10:17 AM
Rating
0





No comments yetLogin first to comment...