我如何可以覆蓋CSS按鈕或複選框放置

我這裏是新用戶，我想提出一個GUI，但我停留在複選框的位置（造型）我如何可以覆蓋CSS按鈕或複選框放置

間距問題：

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

來源

2017-09-04 Mohammad Mubin

你可以發佈'.toggle-switch'的相關CSS嗎？ – pixleight

我對郵件進行了更改 –

您可以使用!important屬性或使用id屬性作爲ID的特異性超過class選擇定義新的風格。 #是使用CSS使用ID來選擇DOM

#camera{ 
    // styles for camera 
}

來源

2017-09-04 04:03:14 brk

我在哪裏使用！重要屬性？（對不起，我從來沒有聽說過這個屬性） –

你必須創建一個新類併爲它們添加屬性。對這些屬性使用'！important'。這是一個鏈接https://css-tricks.com/when-using-important-is-the-right-choice/ – brk

創建新的CSS類，並使用!important到要覆蓋，對於例如，如果要覆蓋left-margin屬性你可以做如下

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

來源

2017-09-04 05:23:57 ganesh

我如何可以覆蓋CSS按鈕或複選框放置

回答

相關問題