Стили флажков Foundation 6 CSS

В настоящее время пытаюсь создать настраиваемый флажок 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

Любая помощь будет оценена по достоинству. Спасибо

В чем проблема, с которой вы застряли? Это работает почти как связанный пример, только ввод не скрывается. Опишите желаемый результат.

— 28.08.2018 15:31

html css checkbox

28.08.2018 12:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

457

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Я определенно этим занимался! Я очень ценю это, у меня только что был ввод после div! Спасибо большое

— 30.08.2018 12:13

28.08.2018 15:34