CSS-стиль Foundation 6

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>