心理咨询网站后台,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
