如何解决复选框半径更改如果选中
这是我的CSS
.round {
position: relative;
}
.round input {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
我在CSS中更改了边框半径,但无法弄清楚如何在js中进行更改。 有人可以帮帮我吗 :) 我是javascript新手,所以请不要评判我,但我尝试过
var checkbox=document.getElementById('checkbox');
if (checkbox.checked){checkbox.style.borderRadius="10%";
}
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <div class="round"> <input type="checkbox" id="checkbox"/> </div> </div> <script src="index.js"></script> </body> </html>
解决方法
我认为正确的方法是使用CSS:
.text
您的JS方法几乎没有问题,首先,您需要添加一个事件侦听器来检测更改:
.round input[type="checkbox"]:checked + label:after {
border-radius: 10%
}
2,您正在尝试将borderRadius添加到复选框,并且您不能真正设置复选框的样式。显然,在您的情况下,label:after负责复选框的样式。 同样,CSS解决方案会更干净
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。