企业建设网站目的是什么意思,黄冈免费网站推广平台汇总,在wordpress中图标,网站模版化配置css实现自定义按钮的样式实际上很早就有了#xff0c;只是会用的人不是很多#xff0c;里面涉及到了最基础的css写法#xff0c;在火狐中按钮还是会显示出来#xff0c;这时需要将i标签的背景设置为白色#xff0c;同时z-index设置比input高一些#xff0c;这样才可以把按…  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-typeinput[typeradio]{position:absolute;display:block;height:1px;widht:1px;left:0;top:0; } .invoice-class-typeinput[typeradio]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-typeinput[typeradio]:checkedi{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_check1span:before{margin-top:20px; } input[typeradio].custom-checkbox, input[typecheckbox].custom-checkbox{position: absolute;z-index: -100;height: 1px;width: 1px;top:0;left:0;} input[typeradio].custom-checkboxspan:before, input[typecheckbox].custom-checkboxspan: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[typeradio].custom-checkbox:checkedspan:before, input[typecheckbox].custom-checkbox:checkedspan: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[typecheckbox]:checkedi{width:60px;transition: width linear .2s;}.animate-checkbox input[typecheckbox]:checkedi:before{left:30px;transition: left linear .2s;}DOM  结果 label classanimate-checkboxinput typecheckbox namei/i /label效果图    没选中        选中　　 　　 　转载于:https://www.cnblogs.com/MonaSong/p/5818084.html