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>

   效果图

   没选中

   

   选中