input多选框checkbox单选框radio的样式修改-------CSS

           input多选框checkbox单选框radio的样式修改-------CSS

效果图

HTML代码

1.多选

       <div class="hy-check hlyw-fg-pandect-l">
                            <input type="checkbox"   ng-model="item.checked1"  ng-change="selectOne()"/>
                            <label class="abs-cell"></label>
                        </div>

2单选

              <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio" ng-model="stateJX" value="1"  name="selectStateJX"> 是</div>
              <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio"  ng-model="stateJX" value="0" name="selectStateJX"> 否</div>

CSS样式

/* 多选 方框 自定义*/
.hy-check {
	width: 30px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
}
.hy-check label {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -10px;
	margin-left: 5px;
	background: #fff;
    border: 1px solid #e7e7e7;
	border-radius: 20px;
}
.hy-check  label:after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-top: none;
    border-right: none;
    opacity: 0;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(255,255,255,.3);
    background-image: linear-gradient(to top, rgba(20,133,255,1), rgba(139,195,255,1));
}
.hy-check input[type=checkbox]:checked + label:after {
	opacity: 1;
}
.hy-check input[type=checkbox] {
    opacity: 0;
    position: absolute;
    z-index: 999;
    left: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: 0;
    margin-top: -15px;
    cursor: pointer;
}
/* 多选 对勾 自定义*/
.hy-checkk {
	width: 30px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
}
.hy-checkk label {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -10px;
	margin-left: 5px;
	background: #fff;
	border: 1px solid #e7e7e7;
}
.hy-checkk  label:after {
	content: '\00a0';
/*	display: inline-block;*/
	border: 4px solid   rgba(20,133,255,1);
	width: 12px;
	height: 8px;
	position: absolute;
/*	top: 3px;
	left: 3px*/;
	border-top-width: 0;
	border-right-width: 0;
	opacity: 0;
	-webkit-transform: rotate(-50deg);


/*	content: '\00a0';
	display: inline-block;
	border: 4px solid #fff;
	border-top-width: 0;
	border-right-width: 0;
	width: 18px;
	height: 10px;
	-webkit-transform: rotate(-50deg);
	position: absolute;
	top:6px;
	left:4px;*/
	/*content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	top: 3px;
	left: 3px;
	border-top: none;
	border-right: none;
	opacity: 0;
	box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(255,255,255,.3);
	background-image: linear-gradient(to top, rgba(20,133,255,1), rgba(139,195,255,1));*/
}
.hy-checkk input[type=checkbox]:checked + label:after {
	opacity: 1;
}
.hy-checkk input[type=checkbox] {
	opacity: 0;
	position: absolute;
	z-index: 999;
	left: 0;
	top: 50%;
	width: 30px;
	height: 30px;
	margin: 0;
	margin-top: -15px;
	cursor: pointer;
}
/**  单选按钮*/
.hy-radio {
    width: 20px;
    height: 0px;
    background-color: #000;
    /*margin-right: 30px;*/
    border-radius: 50%;
    position: relative;
    top: -15px;
}
.hy-radio:before,.hy-radio:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    transition: .3s ease;
}
.hy-radio:before {
    top: 0px;
    left: 0px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #1485FD;
}
.hy-radio:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    background-color: #fff; 
}
.hy-radio:checked:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background-color: #1485FD; 
}
.hy-radio:checked:before {
    border-color:#1485FD; 
}