改变checkbox默认样式

小鱼儿 2021-09-13 15:58 351阅读 0赞

## .html ##

## .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;
    }

效果图如下：  
![在这里插入图片描述][20200429112745901.png]

[20200429112745901.png]: /images/20210913/85be19bc1d314897b14ee1036146491d.png