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

Question

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

Answer 1

您可以使用!important属性，也可以使用id属性定义新样式，因为id的特异性比class选择器要强。 #用于在CSS中使用ID选择dom

#camera{
  // styles for camera
}

Answer 2

创建新的CSS类并在要覆盖的属性上使用!important ，例如，如果要覆盖left-margin ，则可以按如下所示进行操作

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-09-04 04:03:14

解决方案2
0 2017-09-04 05:23:57

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-09-04 04:03:14

解决方案2 0 2017-09-04 05:23:57

解决方案1
0 已采纳 2017-09-04 04:03:14

解决方案2
0 2017-09-04 05:23:57