CSS3 checkbox复选框和radio单选框美化效果
分类:实例代码
CSS3之前要美化单选框和复选框无非是使用图片进行相关的替换操作,并且还有很大的局限性,CSS3的出现,一切变的轻松起来,效果非常的绚丽,下面就分享一段能够实现此功能的代码实例,需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <head> <style type="text/css"> @keyframes click-wave{ 0%{ width:40px; height:40px; opacity:0.35; position: relative; } 100%{ width:200px; height:200px; margin-left:-80px; margin-top:-80px; opacity:0.0; } } .option-input{ -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; position:relative; top:13.33333px; width:40px; height:40px; transition:all 0.15s ease-out 0; background:#cbd1d8; border:none; color:#fff; cursor:pointer; display:inline-block; outline:none; position:relative; margin-right:0.5rem; z-index:1000; } .option-input:hover{ background:#9faab7; } .option-input:checked{ background:#40e0d0; } .option-input:checked::before{ width:40px; height:40px; position:absolute; content:'\2716'; display:inline-block; font-size:26.66667px; text-align:center; line-height:40px; } .option-input:checked::after{ animation:click-wave 0.65s; background:#40e0d0; content:''; display:block; position:relative; z-index:100; } .option-input.radio{ border-radius:50%; } .option-input.radio::after{ border-radius:50%; } body{ display:-webkit-box; display:-moz-box; display:box; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal; -webkit-box-pack:start; -moz-box-pack:start; box-pack:start; -webkit-box-align:stretch; -moz-box-align:stretch; box-align:stretch; background:#e8ebee; color:#9faab7; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; } body div{ padding:5rem; } body label{ display:block; line-height:40px; } </style> </head> <body> <div style="width:200px;float:left"> <label><input type="checkbox" class="option-input checkbox" checked="">Checkbox </label> <label><input type="checkbox" class="option-input checkbox">Checkbox</label> <label><input type="checkbox" class="option-input checkbox">Checkbox</label> </div> <div style="width:200px;float:left"> <label><input type="radio" class="option-input radio" name="example">Radio option</label> <label><input type="radio" class="option-input radio" name="example">Radio option</label> <label><input type="radio" class="option-input radio" name="example">Radio option</label> </div> </body> </html>