Foundation 6 CSS復選框樣式

Question

當前正在嘗試使用現有CSS代碼制作自定義CSS復選框。

 .nk-btn-color-dark-5 { background-color: #293139; border-color: #101215; border-style: solid; } .nk-btn-color-dark-5:hover, .nk-btn-color-dark-5.hover { background-color: #3b4550; border-color: #4a5665; } .nk-btn-color-dark-5:active, .nk-btn-color-dark-5.active { background-color: #4a5665; border-color: #59687a; } .nk-btn-color-dark-5.nk-btn-outline { color: #293139; } .nk-btn-color-dark-5.nk-btn-outline:hover, .nk-btn-color-dark-5.nk-btn-outline.hover { color: #14171b; } .nk-btn-color-dark-5.nk-btn-outline:active { color: black; } .nk-btn-hover-color-main-7.nk-btn-color-white:hover, .nk-btn-hover-color-main-7.nk-btn-color-white.hover, .nk-btn-hover-color-main-7.nk-btn-color-white:active, .nk-btn-hover-color-main-7.nk-btn-color-white.active { color: #fff; } .nk-btn-hover-color-main-7:hover, .nk-btn-hover-color-main-7.hover { background-color: #FFD700; border-color: #a5102c; } .nk-btn-hover-color-main-7:active, .nk-btn-hover-main-7.active { background-color: #FFD700; border-color: #a5102c; } 

 <input id="checkbox1" type="checkbox" name="prod" value="1"> <label class="nk-btn nk-btn-rounded nk-btn-color-dark-5 nk-btn-hover-color-main-7" for="checkbox1">Add to Cart</label> 

該按鈕的當前CSS。 和HTML，我無法弄清楚如何使其工作。 我已經盡我所知，以此為指導。 https://codepen.io/anon/pen/LJVgQm

任何幫助，將不勝感激。 謝謝

Answer 1

如果您希望復選框不可見並影響其同級標簽的樣式，則只會丟失兩件事：

input:checked + label定位帶有同級選擇器的復選框旁邊的標簽。

#checkbox1{display: none;}隱藏您的復選框。

 #checkbox1{display: none;} .nk-btn-color-dark-5 { background-color: #293139; border-color: #101215; border-style: solid; } .nk-btn-color-dark-5:hover, .nk-btn-color-dark-5.hover { background-color: #3b4550; border-color: #4a5665; } .nk-btn-color-dark-5:active, .nk-btn-color-dark-5.active { background-color: #4a5665; border-color: #59687a; } .nk-btn-color-dark-5.nk-btn-outline { color: #293139; } .nk-btn-color-dark-5.nk-btn-outline:hover, .nk-btn-color-dark-5.nk-btn-outline.hover { color: #14171b; } input:checked + label, .nk-btn-color-dark-5.nk-btn-outline:active { color: black; } .nk-btn-hover-color-main-7.nk-btn-color-white:hover, .nk-btn-hover-color-main-7.nk-btn-color-white.hover, .nk-btn-hover-color-main-7.nk-btn-color-white:active, .nk-btn-hover-color-main-7.nk-btn-color-white.active { color: #fff; } .nk-btn-hover-color-main-7:hover, .nk-btn-hover-color-main-7.hover { background-color: #FFD700; border-color: #a5102c; } input:checked + label, .nk-btn-hover-color-main-7:active, .nk-btn-hover-main-7.active { background-color: #FFD700; border-color: #a5102c; } 

 <input id="checkbox1" type="checkbox" name="prod" value="1"> <label class="nk-btn nk-btn-rounded nk-btn-color-dark-5 nk-btn-hover-color-main-7" for="checkbox1">Add to Cart</label>