php 160720ラジオボタン，チェックボックスのデザイン変更

Posted 2021-05-05

$iconColor: #4664AC;  

input[type=radio], input[type=checkbox] {
	display: none;
}

.radio, .checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	margin: 0 20px 8px 0;
	padding: 12px 12px 12px 42px;
	border-radius: 8px;
	background-color: #f6f7f8;
	vertical-align: middle;
	cursor: pointer;

	&:hover {
		background-color: #e2edd7;
		&:after {
			border-color: $iconColor;
		}
	}

	&:after {
		-webkit-transition: border-color 0.2s linear;
		transition: border-color 0.2s linear;
		position: absolute;
		top: 50%;
		left: 15px;
		display: block;
		margin-top: -10px;
		width: 16px;
		height: 16px;
		border: 2px solid #bbb;
		border-radius: 6px;
		content: '';
	}
}
.radio {
	&:before {
		-webkit-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
		position: absolute;
		top: 50%;
		left: 20px;
		display: block;
		margin-top: -5px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: $iconColor;
		content: '';
		opacity: 0;
		input[type=radio]:checked + & {
			opacity: 1;
		}
	}
}

.checkbox {
	&:before {
		-webkit-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
		position: absolute;
		top: 50%;
		left: 21px;
		display: block;
		margin-top: -7px;
		width: 5px;
		height: 9px;
		border-right: 3px solid $iconColor;
		border-bottom: 3px solid $iconColor;
		content: '';
		opacity: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		input[type=checkbox]:checked + & {
			opacity: 1;
		}
	}
}
//間にbr、spanなど入れてしまうと機能しなくなる。

<input type="radio" name="1" checked id="radio07">
<label for="radio07" class="radio">建築営業職</label>