我是这里的新用户，正在制作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>
toggle-switches.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
}