input选择框样式修改与⾃定义
html⾃带的选择框样式不好看，并且在ios设备上丑的。所以⼀般都是⾃定义样式；
原理：将原来默认的input选择框隐藏，然后控制label的:before与:after，配合⽮量图标或者图⽚来实现选中效果。
效果：
这些样式⼤⼩、颜⾊、图标都是可以改的啦。有时间要做⼀套出来，可以直接⽤的啦。建议⽤图⽚做，如果⽤⽮量图标的话效果虽然好，但是要引⼊图标库并且有点⼩问题。
css样式：
/*复选框样式*/
.checkbox{position:relative;}
.checkbox label{padding-left:18px;}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
top:1px;
margin-left: 12px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
}
.checkbox label::after {
content: "";
html input type属性display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -2px;
top: 0px;
margin-left: 12px;
padding-left: 3px;
padding-top: 1px;
font-size: 16px;
color: #555555;
}
.checkbox input[type="checkbox"]:checked + label::before {  background-color: #337ab7;
border-color: #337ab7;
background-image:;
}
.checkbox input[type="checkbox"]:checked + label:after{
  background:url(../img/checked.png) 2px 1px;
  background-size:100% 100%;
}
/*单选框样式*/
.radiobox {
padding-left: 40px; display:inline-block;}
.radiobox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;line-height:19px; }
.radiobox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -15px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out; }
.radiobox label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -15px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radiobox input[type="radio"] {
opacity: 0;
z-index: 1; }
.radiobox input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1); }
.radiobox input[type="radio"]:disabled + label {
opacity: 0.65; }
.radiobox input[type="radio"]:disabled + label::before {
cursor: not-allowed; }
.radiobox.radio-inline {
margin-top: 0; }
.radiobox input[type="radio"] + label::after {
background-color: #337ab7; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。