html修改radio、checkbox样式 纯CSS改写checkbox样式,让复选框看起来更舒服一些

 狼丶宇先生   2018-01-23 17:10   605 人阅读  0 条评论

原生的checkbox、radio样式不好看,试试把以下代码进去看看。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<link href="../css/bootstrap.css" rel="stylesheet">  
<style type="text/css">  
/*
.mycheck {  
    width: 25px;  
    margin: 20px 100px;  
    position: relative;  
}  
.mycheck input[type=checkbox] {  
    visibility: hidden;  
}  
.mycheck label {  
    cursor: pointer;  
    position: absolute;  
    width: 25px;  
    height: 25px;  
    top: 0;  
    left: 0;  
    background: #fff;  
    border:2px solid #ccc;  
    -moz-border-radius: 3px;      /* Gecko browsers */  
    -webkit-border-radius: 3px;   /* Webkit browsers */  
    border-radius:3px;            /* W3C syntax */  
}  
.mycheck label:after {  
    opacity: 0;  
    content: '';  
    position: absolute;  
    width: 9px;  
    height: 5px;  
    background: transparent;  
    top: 6px;  
    left: 6px;  
    border: 2px solid #333;  
    border-top: none;  
    border-right: none;  
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    transform: rotate(-45deg);  
}  
.mycheck label:hover::after {  
 opacity: 0.5;  
}  
.mycheck input[type=checkbox]:checked + label:after {  
    opacity: 1;  
}  
*/

/**
* 这两段效果不一样的
**/
input[type=radio],input[type=checkbox]  {  
    display: inline-block;  
    vertical-align: middle;  
    width: 20px;  
    height: 20px;  
    margin-left: 5px;  
    -webkit-appearance: none;  
    background-color: transparent;  
    border: 0;  
    outline: 0 !important;  
    line-height: 20px;  
    color: #d8d8d8;  
}  
input[type=radio]:after  {  
    content: "";  
    display:block;  
    width: 20px;  
    height: 20px;  
    border-radius: 50%;  
    text-align: center;  
    line-height: 14px;  
    font-size: 16px;  
    color: #fff;  
    border: 2px solid #ddd;  
    background-color: #fff;  
    box-sizing:border-box;  
	margin-left: -5px;
    margin-top: -5px;
}  
  
input[type=checkbox]:after  {  
    content: "";  
    display:block;  
    width: 20px;  
    height: 20px;  
    text-align: center;  
    line-height: 14px;  
    font-size: 16px;  
    color: #fff;  
    border: 2px solid #ddd;  
    background-color: #fff;  
    box-sizing:border-box;  
}  
input[type=checkbox]:checked:after  {  
    border: 4px solid #ddd;  
    background-color: #37AF6E;  
}  
  
input[type=radio]:checked:after  {  
    content: "L";  
    transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
    border-color: #37AF6E;  
    background-color: #37AF6E;  
}  
</style>  
</head>  
<body>  
<h3>Checkbox</h3>  
<div class="mycheck">  
  <input type="checkbox" value="1" id="checkbox1" name="" />  
  <label for="checkbox1"></label>  
</div>  
<h3>radio</h3> 
<div class="mycheck">  
  <input type="radio" value="1" id="radio1" name="" />  
  <label for="radio1"></label>  
</div>  
</body>  
</html>

效果图:



附件:


checkBox.zip


本文地址:http://hao2013.cn/?id=42
版权声明:本文为原创文章,版权归 狼丶宇先生 所有,欢迎分享本文,转载请保留出处!