修改单选框,复选框默认样式 input[type='radio'] input[type="checkbox"]

由于业务需求,本样式中修改的单选框和复选框的样式是一样的。

效果图:

        复选框                                                           单选框

修改单选框,复选框默认样式 input[type='radio'] input[type=                                    修改单选框,复选框默认样式 input[type='radio'] input[type=

1.标签


2.复选框样式代码

/*公共样式*/
input[type="checkbox"]{
	display: none;
}
input[type="checkbox"]+label:before {
    display: inline-block;
  	content: "";
    width: 0.6vw;
    height: 0.6vw;
    border: 1px solid #61A5FF;
    border-radius: 50%;
    margin-right: 1vw;
} 
input[type="checkbox"]:checked+label:before {
	background: #61A5FF;
}
/*单独设置样式*/
.format li{
	margin-bottom: 0.8vw;
	text-align: left;
}
.format li label{
	width: 8vw;
	margin-left: 7vw;
	font-size: 0.97vw;
}

3.单选框样式代码

input[type='radio']{
    display:none; 
}
input[type='radio'] + label:before{
	content: "";
    display: inline-block;
    width: 0.6vw;
    height: 0.6vw;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #61A5FF;
}

input[type='radio']:checked+label:before{
   	background-color: #61A5FF;
    color: #fff;
}

 

你可能感兴趣的:(JavaScript实践,html5,技术日常)