html - 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 使用 sibling selector 定位复选框旁边的标签.

#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>