input选择框样式修改与自定义

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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: "";
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; }。

相关文档
最新文档