<!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 style="color: red;">注:这里如果radio加id,label标签for属性指向id则可以点击label是radio触发</p> <p style="color: red;">如果不通过id来关联,则是需要直接点击radio才产生效果</p> <ul> <li> <input type="radio" id="radio1" class="my-radio" name="demo" /> <label class="radio-label" for="radio1"></label> </li> <li> <input type="radio" id="radio2" class="my-radio" name="demo" /> <label class="radio-label" for="radio2"></label> </li> <li> <input type="radio" id="radio3" class="my-radio" name="demo" /> <label class="radio-label" for="radio3"></label> </li> <li> <input type="radio" id="radio4" class="my-radio" name="demo" /> <label class="radio-label" for="radio4"></label> </li> <li> <input type="radio" id="radio5" class="my-radio" name="demo" /> <label class="radio-label" for="radio5"></label> </li> </ul> </body> </html>
效果如下:
radio demo
注:这里如果radio加id,label标签for属性指向id则可以点击label是radio触发
如果不通过id来关联,则是需要直接点击radio才产生效果
原文地址:https://www.cnblogs.com/guxingzhe/p/12217213.html
时间: 2024-10-07 10:10:25