パソコンの超初心者 -- ラジオボタン( 61 )

文書更新：2017年09月13日(水) 午前11時28分18秒

Home > 備忘録 > Web page 作成 > ラジオボタン( 61 )

radio button の自作

HTML

<div id="demo">
	<form class="myradio">
	<p>※青森県を選択不可にした意図はありません</p>
	<!-- <label>タグのfor属性の値とフォーム部品のid属性の値を一致させる -->
	<input type="radio" name="hyouki" id="hyouki1" value="11" checked="checked"><label for="hyouki1">山梨県</label>
		<!-- 項目間の余白 -->
	<input type="radio" name="hyouki" id="hyouki2" value="12" disabled><label for="hyouki2">青森県</label>
	
	<input type="radio" name="hyouki" id="hyouki3" value="13"><label for="hyouki3">富山県</label>
	
	<input type="radio" name="hyouki" id="hyouki4" value="14"><label for="hyouki4">静岡県</label>
	
	<input type="radio" name="hyouki" id="hyouki5" value="15"><label for="hyouki5">秋田県</label>
	</form>
</div>

スタイルシート

#demo{
	margin-left:1em;
}
/*
	既存のラジオボタンを非表示にし、新しくボタンを自作する
*/
form.myradio input[type="radio"]{
	display: none;					/*既存のラジオボタンを非表示にする*/
}
form.myradio input[type="radio"] + label{
	display: inline-block;					/*要素を横並びにする*/
	position: relative;						/*相対位置の配置*/
	cursor: pointer;						/*マウスカーソルの形を指定する*/
	margin: 0px;							/*ボックス外側の余白を指定する*/
	padding: 2px 0px 0px calc(1em + 2px);	/*ボックス内側の余白を指定する*/
	border-radius: 2px;						/*角丸を指定する*/
	color: #000;							/*フォントの色を指定*/
	/*font-size: 14px;						/*フォントのサイズを指定*/
	text-align: left;						/*テキストの左寄を指定する*/
	line-height: 1;							/*行の高さを指定する*/
}
form.myradio input[type="radio"]:checked + label{	/*マウス選択時*/
/*	background: #31a9ee;					/*マウス選択時の背景色を指定する */
	color:red;								/*マウス選択時のフォント色を指定する*/
}
form.myradio input[type="radio"] + label:hover{
	background-color: #eee8aa;			/*マウスオーバー時の背景色を指定する*/ 
}
form.myradio input[type="radio"] + label:before{	/*デフォルトのラジオボタン表示*/
	position: absolute;
	content: "";						/*これを削除するとボタンが表示されない*/
	top: 50%;							/*上部から配置の基準位置を決める*/
	left: 0px;							/*左から配置の基準位置を決める*/
	width: calc(1em - 1px);				/*ラジオボタンの横幅を指定する*/
	height: calc(1em - 1px);			/*ラジオボタンの高さを指定する*/
	margin-top: calc(-1em/2);			/*ボックス外側の余白を指定する*/
	background: #dcdcdc;				/*ラジオボタンのボーダーを背景色指定する*/
	border-radius: 50%;					/*角丸を指定する*/
	border:solid 1px #696969;			/*ラジオボタンのボーダーを描画する*/
}
form.myradio input[type="radio"]:checked + label:after{		/*選択時のラジオボタン設定*/
	position: absolute;
	content: "";					/*これを削除するとボタンが表示されない*/
	top: calc(1em/2 - 2px);			/*上部からの基準位置を決める*/
	left: calc(1em/2 - 3px);		/*左からの基準位置を決める*/
	width: calc(1em/2);				/*ラジオボタンの横幅を指定する*/
	height: calc(1em/2);			/*ラジオボタンの高さを指定する*/
	margin: 0px;					/*ボックス外側の余白を指定する*/
	border-radius: 50%;				/*角丸を指定する*/
	background: red;				/*ラジオボタンのボーダーを背景色指定する*/
}
form.myradio input[type="radio"][disabled] + label{	/*ラジオボタンがdisabledの時の設定*/
	color: #999999;								/*フォントの色を指定*/
	cursor: default;							/*マウスカーソルの形を指定する*/
}

実行結果