<!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才產生效果