html代码
<body>
<label>
<input type="radio" name="tab">
<span></span>
</label>
<label>
<input type="radio" name="tab">
<span></span>
</label>
<label>
<input type="radio" name="tab">
<span></span>
</label>
</body>
CSS代码
* {
margin: 0;
padding: 0;
}
label {
position: relative;
float: left;
margin-left: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
label input {
position: absolute;
left: -50px;
top: -50px;
}
label span {
/*通过定位把span元素撑开跟父级label一样大*/
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
border-radius: 50%;
}
input:checked~span {
/*input选中时，选择input后面相邻的span*/
background-color: pink;
}
3905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
