纯css改削radio样式
<!DOCTYPE html> <html> <head> <title>radio demo</title> <style> div,ul,li { padding: 0; margin: 0; } li { position: relative; height: 30px; margin-bottom: 10px; } .my-radio { position: relative; z-index: 1; } .my-radio:checked::after { content: ‘‘; } .my-radio::before { content: ‘‘; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #fff; border: 2px solid blue; } .my-radio::after { position: absolute; top: 4px; left: 4px; background-color: blue; width: 8px; height: 8px; border-radius: 50%; } .radio-label { display: inline-block; border: 1px solid blue; width: 100px; height: 30px; position: absolute; left: 0; top: 0; } .my-radio:checked + .radio-label { border-color: red; background-color: #ccc; } </style> </head> <body> <p>注：这里如果radio加id，label标签for属性指向id则可以点击label是radio触发</p> <p>如果欠亨过id来关联，则是需要直接点击radio才孕育产生效果</p> <ul> <li> <input type="radio" /> <label for="radio1"></label> </li> <li> <input type="radio" /> <label for="radio2"></label> </li> <li> <input type="radio" /> <label for="radio3"></label> </li> <li> <input type="radio" /> <label for="radio4"></label> </li> <li> <input type="radio" /> <label for="radio5"></label> </li> </ul> </body> </html>
效果如下：
radio demo
注：这里如果radio加id，label标签for属性指向id则可以点击label是radio触发
如果欠亨过id来关联，，则是需要直接点击radio才孕育产生效果
纯css改削radio样式
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31304.html
- 上一篇：为了兼容性好些
- 下一篇：它将从source处接收到的event格式的数据缓存起来
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")