«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2017/04/13 19:47:55  №973135 1
ОП, аноны, помогите. Смотрите, я делаю урок №11 на три кнопки (те что ОП советовал, по CSS). Все работает, кроме одной вещи, у меня кнопка хоть убей, но не хочется оставаться нажатой. Уже все перепробовал. Нашел похожие кнопки на bootstrap, посмотрел как они там сделаны (в source коде), запутался окончательно. НЕ работает именно момент .button:focused, input:checked тоже самое. ЧЯДНТ
Собственно сам код: https://codeshare.io/aJ7x76
Ответы: >>973151 >>973342 >>976693
Аноним 2017/04/13 20:05:16  №973151 2
Ответы: >>973158 >>976693
Аноним 2017/04/13 20:22:05  №973158 3
>>973151
Блин, ОП - линковал похожее, тут такое ощущение что трабла какая-то из-за того что input вложен в label. Если его достать и прописать через for и id, что просили не делать, то кнопка нажимается, но слетает почему то border-radius. Как так жить, ОП надежда на тебя.
Ответы: >>973182
Аноним 2017/04/13 20:47:45  №973182 4
>>973158
+ ОП, еще пишет что для кнопки использовал три тэга, label + input + i. Зачем нужен i?
Ответы: >>976693
Аноним 2017/04/20 04:06:45  №976693 5
>>973182

Для подсветки текста у нажатой кнопки.

>>973135

Эти кнопки делаются на основе input radio или checkbox. Мы делаем кнопку в виде тега label, который передает клик на input, и в зависимости от состояния инпута мы подсвечиваем текст кнопки.

Пример:

<input type="checkbox" class="btn-checkbox" id="checkbox1"><label for="checkbox1" class="btn-label">Текст</label>
.btn-checkbox:checked + .btn-label { background: yellow; }

Но тут есть недостаток - надо указывать атрибуты id, for. Избавиться от них, можно положив инпут внутрь label.

Изучи селекторы + и ~.

На хабре есть статьи, гугли. Например

- https://habrahabr.ru/post/144104/
- https://habrahabr.ru/post/154719/
- https://habrahabr.ru/company/imagecms/blog/204030/
- http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/


>>973151

тут нет связи между label и input - их надо либо вложить друг в друга либо связать через id.