CSS3 radio单选按钮美化效果
分类:实例代码
CSS3 radio单选按钮美化效果属于前端实例代码,有关更多实例代码大家可以查看。
默认的radio单选按钮虽然说不上丑陋,但是绝对不美观。
下面分享一段代码实例,它实现了对单选按钮的美化效果,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; outline: 0 !important; } /*radio01*/ #radio01:after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 13px; font-size: 24px; color: #09f; border: 2px solid #ddd; background-color: #fff; box-sizing: border-box; } #radio01:checked:after { content: "22"; border-color: #09f; transition: all 0.3s ease-in-out; } /*radio02*/ #radio02:after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 16px; font-size: 12px; color: #09f; border: 2px solid #ddd; background-color: #fff; box-sizing: border-box; } #radio02:checked:after { content: "13"; border-color: #09f; transition: all 0.3s ease-in-out; } /*radio03*/ #radio03:after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 16px; font-size: 12px; color: #09f; border: 2px solid #ddd; background-color: #fff; box-sizing: border-box; } #radio03:checked:after { content: "16"; border-color: #09f; transition: all 0.5s ease; } </style> </head> <body> <div> <div> <label for="radio01">前端教程网一</label> <input type="radio" name="radio-01" id="radio01" /> </div> <div> <label for="radio02">前端教程网二</label> <input type="radio" name="radio-01" id="radio02" /> </div> <div> <label for="radio03">前端教程网三</label> <input type="radio" name="radio-01" id="radio03" /> </div> </div> </body> </html>
CSS3 radio单选按钮美化效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 radio单选按钮美化效果就介绍到这了。