radio单选按钮美化效果
分类:实例代码
radio单选按钮美化效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了利用CSS3美化radio单选按钮效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端教程网</title> <style type="text/css"> body { font-family: "微软雅黑"; } /*隐藏自带的单选框*/ .icheck-radio>input { display: none; } /*为容器设置felx布局 */ .icheck-radio { display: flex; } .icheck-radio { padding: 5px 0; cursor: pointer; align-items: center; } .icheck-media { position: relative; width: 22px; height: 22px; margin-right: 5px; color: #fff; border: 1px solid #d9d9d9; } .icheck-radio .icheck-media { border-radius: 50%; } .icheck-radio:hover .icheck-media { border-color: #009a61; } .icheck-radio .icheck-media:after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #009A61; transform: scale(0); transition: .3s ease; } .icheck-radio>input:checked+.icheck-media { border-color: #009A61; background: #fff; } .icheck-radio>input:checked+.icheck-media:after { transform: scale(1); } </style> </head> <body> <div class="box"> <label for="radio3" class="icheck-radio"> <input type="radio" id="radio3" name="sex1" checked> <div class="icheck-media"></div> <div class="icheck-inner"> <div class="icheck-title">男</div> </div> </label> <label for="radio4" class="icheck-radio"> <input type="radio" id="radio4" name="sex1"> <div class="icheck-media"></div> <div class="icheck-inner"> <div class="icheck-title">女</div> </div> </label> </div> </body> </html>
radio单选按钮美化效果,这样的场景在实际项目中还是用的比较多的,关于radio单选按钮美化效果就介绍到这了。