Как стилизовать radio buttons обернутые в label?

Question

[Rheinmetall]

Всем доброго дня! Решил попытать счастья еще тут, так как сам уже извращался как только мог, но видимо моих навыков не хватает. Подобные вопросы тут тоже уже задавались, но исчерпывающего ответа я там не нашел. Короче нужно стилизовать радиокнопки, но стандартное решение не канает, потому что тот кто верстал это все, когда-то завернул инпуты в лейблы, переделывать не вариант. Пробовал делать через jQuery но запутался полностью. Собственно может кто-то может подсказать решение, желательно с примером если это не слишком трудозатратно, можно на JS. Спасибо!
Ссылка на codepen

Comments

[Stalker_RED]

По ссылке на codepen виден результат ваших попыток. Но непонятно, что именно вы пытаетесь сделать.

[Stalker_RED]

И что такое "стандартное решение"?

[Rheinmetall]

Stalker_RED: на кодпен я стилизовал радиокнопки (просто по быстрому накидал для примера) но мне нужно это все заставить работать. Сейчас они просто раскрашены и не более, проблема в том чтоб заставить after (внутренняя красная точка) на cheked появляться и пропадать при его отсутствии.

[dom1n1k]

Стандартное - это когда кнопки и лейблы стоят рядом, как узлы одного уровня. Тогда работает селектор с плюсиком, и в лейбле можно нарисовать что угодно.
Конечно, с точки зрения верстки обернуть удобнее, потому что в этом случае не надо заморачиваться с атрибутами for. Но тогда со стилизацией проблемы. Я как-то бился над этим вопросом - красивого решения так и не нашел.

[Stalker_RED]

Rheinmetall: А верстку модифицировать совсем нельзя, но скрипты использовать можно?

[Rheinmetall]

Stalker_RED: стандартное решение когда лебл лежит на одном уровне с инпутом и к нему можно обратится через селектор соседа и на изменение состояния радиокнопки можно привязать изменение свойств псевдоэлементов лейбла (display: none\ display:block) В этом же случае такой подход не катит потому что лейбл является родителем для инпута, а css, к сожалению, не позволяет обращаться от чайлда к родителю.

[Rheinmetall]

Stalker_RED: верстку можно модифицировать, но это не вариант, потому что там 150 эвентов (утрирую конечно но дохрена) и это нужно их все перебрать и переписать. Короче весьма скучная, неблагодарная и самое главное очень временезатратная работа

[Алекс Глебов]

https://codepen.io/search/pens/?q=checkbox&limit=a...

на codeipen есть поиск, там столько примеров))

Answer 1

[Stalker_RED]

Вариант с изменением верстки: добавить какой-нибудь элемент (span например) внутрь label, тогда он будет рядом с инпутом и можно будет использовать span + input:checked.

Вариант со скриптом:

$('.radio input').on('change', function(){
  $('.radio label').removeclass('hilight')
  $(this).closest('label').addClass('hilight')
})

Comments

[Rheinmetall]

Спасибо, работает

Answer 2

[Юнус Газиев]

JQueryFormStyler-Modern

Answer 3

[Андрей Саныч]

https://codepen.io/anon/pen/zzMKGX

Comments

[Алекс Глебов]

только after и before можно к input добавлять
лишний span не нужен)

[Андрей Саныч]

Алекс Глебов: та я по-быстрому))

[Вадим Кот]

Алекс Глебов: не стоит забывать, что input будет скрыт вместе со своими псевдоэлементами изначально
Поэтому вариант со спанами добавленными jQuery (а не в верстку) https://codepen.io/anon/pen/NgERvM

[Андрей Саныч]

vadimkot: jQuery там не надо. зачем оно там? сразу спан в хтмл вставить и все.

[Вадим Кот]

Андрей Саныч: Так в вопросе указано, что переделывать верстку не вариант.

[Алекс Глебов]

vadimkot: не будет)
https://codepen.io/Sambego/pen/zDLxe

[Ankhena]

Алекс Глебов:

только after и before можно к input добавлять

давно?

[Вадим Кот]

Алекс Глебов: Какова поддержка браузерами :checked:before? Хром в недалеком прошлом не поддерживал, а IE?

P.S. В комментариях на codepen указано "These only work in chrome :)" - поддержка только хромом. Вы всерьез предлагали такое решение?

[Ankhena]

vadimkot: Алекс Глебов: у input просто нет ни before ни after, так что до :checked:before дело все равно не дойдет