php 160720ラジオボタンをタブ切り替えのデザインにする

Posted 2021-05-05

.box_radio input {
	display: none;
}
.box_radio label{
	display: block;
	cursor: pointer;
	width: 100%;
	margin: 0;
	margin-bottom: 20px;
	padding: 15px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.box_radio label:first-of-type{
	border-radius: 3px 0 0 3px;
	margin-bottom: 8px;
}
.box_radio label:last-of-type{
	border-radius: 0 3px 3px 0;
}
.box_radio input[type="radio"]:checked + .switch-on {
	background-color: #a1b91d;
	color: #fff;
}
.box_radio input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: #fff;
}

.box_radio {
	@include mq(tab) {
		li {
			width: (627 / 1260)*100%;
			&:first-child {
				margin-right: (6 / 1260)*100%;
			}
			float: left;
		}
	}
}

//radioの見た目をタブのようにする。
//レスポンシブ対応でフロート、幅設定で対応可

<div class="box_radio">
	<ul>
		<li><input type="radio" name="s2" id="on" value="1" checked="">
		<label for="on" class="switch-on">新卒採用エントリーフォーム</label></li>
		<li><input type="radio" name="s2" id="off" value="0">
		<label for="off" class="switch-off">キャリア採用エントリーフォーム</label></li>
	</ul>
</div>