在CSS中,我们可以使用伪类来控制按钮的样式。其中,:checked伪类是用来控制单选框和复选框的样式的。今天我们来探讨一下如何使用CSS来让按钮样式变成单选框的效果。<style&am
在CSS中,我们可以使用伪类来控制按钮的样式。其中,:checked
伪类是用来控制单选框和复选框的样式的。今天我们来探讨一下如何使用CSS来让按钮样式变成单选框的效果。
<style> /* 隐藏原来的radio按钮 */ input[type="radio"] { display: none; } /* 定义单选框样式 */ input[type="radio"] + label { display: inline-block; cursor: pointer; padding: 10px 20px; border: 2px solid #ccc; border-radius: 5px; margin-right: 5px; } /* 定义选中单选框样式 */ input[type="radio"]:checked + label { border-color: #0066cc; background-color: #0066cc; color: #fff; } </style> <div> <input type="radio" id="radio1" name="radio" value="1" /> <label for="radio1">选项1</label> <input type="radio" id="radio2" name="radio" value="2" /> <label for="radio2">选项2</label> <input type="radio" id="radio3" name="radio" value="3" /> <label for="radio3">选项3</label> </div>
以上代码会显示出一个带有三个单选框的div框,但是原来的单选框样式已经被隐藏了。对于每一个单选框,我们添加了一个
总结:使用CSS把按钮样式变成单选框很容易。我们只需要把原先的单选框隐藏,然后利用伪类和
粉丝
0
关注
0
收藏
0