Question

我是新用户，我正在制作一个GUI，但我被困在复选框（造型）的位置

间距问题：

spacing issue

当我添加切换开关（复选框）时，我的所有开关的食物都会被破坏任何想法？

.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>

肘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;
}

Answer 1

您可以使用!important属性或使用id属性定义新样式，因为id的特殊性超过class选择器。#用于选择dom使用id在css中

#camera{
  // styles for camera
}

Answer 2

创建新的CSS类并使用!important到要覆盖的属性，例如，如果您要覆盖left-margin，可以按以下方式执行

.new-class-name{
         margin-left: 10% !important 
}

如何覆盖css按钮或复选框位置

2 个答案: