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>