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>

​