1

Как заставить работать эти чебоксы, когда их несколько на странице? И можно как то перенести название чебокса справа налево что бы текст был "кликабельным"

/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label><br><br>
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label><br><br>
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label><br><br>

2
  • 1
    Дать им разные значения id - .
    – user176262
    10 апр 2017 в 16:04
  • размышлял по этому поводу, только не чё не получается, можно пример?
    – Den
    10 апр 2017 в 16:07

2 ответа 2

2

/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
<label for="checkbox1">Я переключаю чекбокс</label>
<input type="checkbox" class="checkbox" id="checkbox1" /><label></label><br><br>
<label for="checkbox2">Я переключаю чекбокс</label>
<input type="checkbox" class="checkbox" id="checkbox2" /><label></label><br><br>
<label for="checkbox3">Я переключаю чекбокс</label>
<input type="checkbox" class="checkbox" id="checkbox3" /><label></label><br><br>

Как было сказано выше - разные id, у вас везде были id "checkbox", изменил на checkbox1, checkbox2 и checkbox3. И для label и для input тегов.

По поводу текста справа налево - сделал, но будьте внимательны, т.к. label участвует в стилях и я добавил пустые label теги.

2
  • Прошу прощения, в input ид сменил, а в label пропустил, из за этого всё и не работало
    – Den
    10 апр 2017 в 16:30
  • Я так и думал :) Почитать подробнее можно здесь htmlbook.ru/html/label
    – Oleg Reym
    10 апр 2017 в 16:34
1

Вам необходимо дать разные id ,

id должен быть уникальный.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.