废话不多说直接看图:复选框的选中喝未选中的,哈哈哈,截图截的不够好,请谅解。
直接上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type=checkbox]{ /*同样,首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 20px; height: 20px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; } input[type=checkbox]:after{ content: '\2714'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text-align: center; line-height: 18px; /*增加动画*/ -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; /*利用border-radius和opacity达到填充的假象,首先隐藏此元素*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0; } input[type=checkbox]:checked:after{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 1; } </style> </head> <body> <input type="checkbox" /> </body> </html>
下面直接看单选框的按钮样式:
选中和未选中的状态
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> form{ position:relative; } input[type=radio]{ /*去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*自定义样式*/ position: relative; display: inline-block; vertical-align: top; width: 20px; height: 20px; border: 1px solid #00bfff; outline: none; cursor: pointer; /*设置为圆形,看起来是个单选框*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } /** * 单选框 选中之后的样式 **/ input[type=radio]:after{ content: ''; position: absolute; width: 12px; height: 12px; display: block; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #00bfff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); /*增加一些动画*/ -webkit-transition : all ease-in-out 300ms; -moz-transition : all ease-in-out 300ms; transition : all ease-in-out 300ms; } input[type=radio]:checked:after{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } </style> </head> <body> <form> <label> <input id="item1" type="radio" name="item" value="选项一" checked> 选项一 </label> <label> <input id="item2" type="radio" name="item" value="选项二" > 选项二 </label> </form> </body> </html>
好了,继续去找我的项目的bug了。
来源:https://www.cnblogs.com/zylily/p/9259459.html