How to make these cheboxes work when there are several of them on the page? And you can somehow transfer the name of the chebox from right to left so that the text would be "clickable"

/* 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>

  • one
    Give them different id values ​​-. - Igor
  • I thought about it, but I can't do it, is it possible to give an example? - Den

2 answers 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>

As mentioned above - different id, you had the id "checkbox" everywhere, changed to checkbox1, checkbox2 and checkbox3. Both for label and for input tags.

About the text from right to left - I did, but be careful, because label participates in styles and I added blank label tags.

  • I apologize, I changed it in the input, I missed it in the label, because of this, everything did not work - Den
  • I thought so :) You can read more here htmlbook.ru/html/label - Oleg Reym

You need to give different id ,

id must be unique.