我是这里的新用户，我正在制作一个 GUI，但我卡在了复选框的位置(样式)
间距问题:
当我添加切换开关(复选框)时，我所有的开关食物都被破坏了任何想法？
.btn-group button {
background-color: Transparent;
border: ;
color: white; /* White text */
padding: 29px 23px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 10%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
margin: 30px 1px;
}
<div class="btn-group">
<button id = "camera" onclick="camera()"></button>
<input id=pumptoggle type="checkbox" class="toggle-switch">
<button id = "fish" onclick="fish()"></button>
<button id = "outside" onclick="outside()"></button>
<button onclick="bulb()"></button>
</div>
<head>
<link rel="stylesheet" href="toggle-switches.css">
</head>
切换开关.css
input[type=checkbox].toggle-switch {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 6em;
height: 3em;
border-radius: 3em;
background-color: #ddd;
outline: 0;
cursor: pointer;
transition: background-color 0.09s ease-in-out;
position: relative;
}
input[type=checkbox].toggle-switch:checked {
background-color: #3af;
}
input[type=checkbox].toggle-switch::after {
content: '';
width: 3em;
height: 3em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.7);
left: 0;
transition: left 0.09s ease-in-out;
box-shadow: 0 0.1em rgba(0, 0, 0, 0.5);
}
input[type=checkbox].toggle-switch:checked::after {
left: 3em;
}
最佳答案
您可以使用 !important 属性或使用 id 属性定义新样式，因为 id 的特异性比 class 选择器更重要。# 用于在css中使用id选择dom
#camera{
// styles for camera
}
关于javascript - 我如何覆盖 css 按钮或复选框放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46030063/