如果我的切换按钮在仅包含切换按钮的单独网页中运行，则它可以正常工作。 但是当我在包含许多 css 的表单页面中放置相同的代码时，它不起作用。
/* Checkbox body */
#tog {
display: block;
width: 50px;
height: 28px;
margin: 0px auto;
border-radius: 100px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
background-color: #E6E9EC;
}
#toggly {
display: none;
}
/* The toggle */
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#tog:hover> .i {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
transform: scale(1.01);
}
#toggly:checked+ #tog > .i {
margin-left: 24px;
}
#tog :active {
background-color: #A6B9CB;
}
#tog :active> .i {
width: 34px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}
#toggly:checked+ #tog :active> .i {
margin-left: 18px;
}
#toggly:checked+ #tog {
background-color: #008FFF;
}<html>
<head>
<title></title>
</head>
<body>
<!-- The Toggle -->
<input type="checkbox" id="toggly" >
<label for="toggly" id="tog"><div class="i"></div></label>
</body>
</html>上面的代码可以工作，但如果放在包含许多 css 的表单页面中，它就无法工作。
谁能帮帮我？
最佳答案
除了下面这段代码外，其他一切看起来都很好:
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
因为它可能已被覆盖，所以给它一个父 ID 以使其更具体，如下所示:
#tog .i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
关于html - 切换按钮不起作用，而是看起来像使用 css 的常规复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51537073/