改变checkbox默认样式

最新推荐文章于 2021-10-14 15:41:56 发布

yanghongyan001

最新推荐文章于 2021-10-14 15:41:56 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/yanghongyan001/article/details/105835915

版权

.html

<div class='checkbox option'>
		    <input type='checkbox' id='checkbox1' name='checkboox[]' value="a"  v-model="checkedNames">
		    <label for='checkbox1'><span class="con">A 3/5</span></label>
		</div>
		<div class='checkbox option'>
		    <input type='checkbox' id='checkbox2' name='checkboox[]' value="b"  v-model="checkedNames">
		    <label for='checkbox2'><span class="con">B 3/7</span></label>
		</div>
		<div class='checkbox option'>
		    <input type='checkbox' id='checkbox3' name='checkboox[]' value="c"  v-model="checkedNames">
		    <label for='checkbox3'><span class="con">C 3/9</span></label>
		</div>

.css

.checkbox {
		position: relative;
		height: 30px;
}
.checkbox input[type='checkbox'] {
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		opacity: 0;
		
}
.checkbox label {
		position: absolute;
		left: 30px;
		top: 0;
		height: 20px;
		line-height: 20px;
		
}
.checkbox label:before {
		content: '';
		position: absolute;
		left: -30px;
		top: 0;
		width: 20px;
		height: 20px;
		border: 2px solid lightgray;
		border-radius: 50%;
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		border-radius: 10%;
		
}

.checkbox label:after {
		content: '';
		position: absolute;
		left: -22px;
		top: 3px;
		width: 6px;
		height: 12px;
		border: 0;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		background: #fff;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		
}

.checkbox input[type='checkbox']:checked + label:before {
		background: #4cd764;
		border-color: #4cd764;
}
.checkbox input[type='checkbox']:checked + label:after {
		background: #4cd764;
}