CSS自定义美化单选按钮样式

直接上效果图：

HTML代码：

<div style="display:flex;">
	<div class="omgui-radio">
		<input type="radio" value="1" id="showon" name="isshow" checked="checked" />
		<label for="showon">显示</label>
	</div>
	<div class="omgui-radio">
		<input type="radio" value="0" id="showoff" name="isshow" />
		<label for="showoff">隐藏</label>
	</div>
</div>

CSS代码：

.omgui-radio {
	margin:5px;
	margin-right:2rem;
}

.omgui-radio input[type="radio"] {
	opacity: 0;
}

.omgui-radio label {
	position: relative;
	cursor: pointer;
}

.omgui-radio label::before {
	content: '';
	position: absolute;
	left: -24px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid #999;
}

.omgui-radio label::after {
	content: '';
	position: absolute;
	left: -20px;
	top: 4px;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	transform: scale(0);
}
/* + 是兄弟选择器,获取选中后的label元素*/
.omgui-radio input+label::before {
	border-color: #ccc;
}

.omgui-radio input+label::after {
	background-color: #ccc;
	transform: scale(1);
	transition: all .3s;
}
.omgui-radio input:checked+label::before {
	border-color: #19B395;
}

.omgui-radio input:checked+label::after {
	background-color: #19B395;
	transform: scale(1);
	transition: all .3s;
}

.omgui-radio input:hover+label::before {
	border-color: #19B395;
}

.omgui-radio input:focus+label::before {
	box-shadow: 0 0 6px #19B395;
}