css笔记——css 实现自定义按钮

css实现自定义按钮的样式实际上很早就有了，只是会用的人不是很多，里面涉及到了最基础的css写法，在火狐中按钮还是会显示出来，这时需要将i标签的背景设置为白色，同时z-index设置比input高一些，这样才可以把按钮盖住，同时注意：background-color放在background后才起作用

/*自定义按钮 */
.invoice-class-type{
position:relative;
display:inline-block;
width:120px;
height:30px;
line-height:30px;
text-align: center;
}
.invoice-class-type>input[type="radio"]{
position:absolute;
display:block;
height:1px;
widht:1px;
left:0;
top:0;
}
.invoice-class-type>input[type="radio"]+i{
display:block;
position:absolute;
left:0;
top:0;
z-index:10;
line-height:30px;
width:120px;
height:30px;
border:1px solid #888;
border-radius:2px;
cursor:pointer;
background-color:#fff;
}
.invoice-class-type>input[type="radio"]:checked+i{
border-color:#f30026;
background:url(../images/modify-img/red_right.png) no-repeat right bottom;
background-color:#fff;
}
/*结束 自定义按钮*/

　　

　　

效果图：



又例如：单选按钮时只需要注意name属性就行

/*checkbox*/
.s-checkbox{
position:relative;
display: inline-block;
}
.shopping_table_check1{
position:relative;
}
.shopping_table_check1>span:before{
margin-top:20px;
}
input[type="radio"].custom-checkbox,
input[type="checkbox"].custom-checkbox{
position: absolute;
z-index: -100;
height: 1px;
width: 1px;
top:0;
left:0;
}
input[type="radio"].custom-checkbox+span:before,
input[type="checkbox"].custom-checkbox+span:before{
display: inline-block;
content: "\a0";
width: 18px;
height: 18px;
line-height: 18px;
font-weight:800;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border:1px solid #f30026;
background-color:#fff;
color:#fff;
}
input[type="radio"].custom-checkbox:checked+span:before,
input[type="checkbox"].custom-checkbox:checked+span:before{
box-shadow:none;
background-color:#f30026;
content: "√";
}
/*结束  checkbox*/

效果图如下：



　　

　结合css3写炫酷按钮

CSS

.animate-checkbox{
position: relative;
display: inline-block;
width:60px;
height:30px;
border-radius: 15px;
background-color:#fff;
box-shadow: 1px 0 3px #333;
margin-top: 30px;
cursor: pointer;
}
.animate-checkbox input{
position: absolute;
top:0;
left:0;
height:1px;
width:1px;
z-index: 1;
}
.animate-checkbox i{
position: absolute;
left:0;
top:0;
background-color: #428bca;
width:30px;
height: 30px;
border-radius: 15px;
z-index: 2;
transition: width linear .2s;
}
.animate-checkbox i:before{
display: block;
position: absolute;
content:" ";
left:0;
top:0;
width:30px;
height: 30px;
border-radius: 100%;
background-color:#f30026;
transition: left linear .2s;
}
.animate-checkbox input[type="checkbox"]:checked+i{
width:60px;
transition: width linear .2s;
}
.animate-checkbox input[type="checkbox"]:checked+i:before{
left:30px;
transition: left linear .2s;
}

DOM 结果

<label class="animate-checkbox">
<input type="checkbox" name="">
<i></i>
</label>

效果图

没选中



选中