Как изменить внешний вид переключателя по умолчанию, а не функциональность?

Question

В форме у меня есть две радиокнопки Да и Нет .Я хочу изменить вид по умолчанию переключателей

, чтобы это понравилось.

Редактировать: Я хотел бы изменить кнопки radio на якорь <a>, когда включен JavaScript, если изменить внешний вид нелегкорадио по умолчанию через css.

Answer 1

Самый простой способ?Установите изображения как метки с атрибутом for, указывающим на переключатели.Затем установите переключатели на display:none;

<input type="radio" name="radio[1]" /><label for="radio[1]"><img src="/yes.png"></label>
<input type="radio" name="radio[2]" /><label for="radio[2]"><img src="/no.png"></label>

ps. При этом используются встроенные функции HTML, которые работают везде и не требуют JavaScript.Для добавления анимации используйте некоторые мета-селекторы CSS (: hover и т. Д.),Когда для метки установлен атрибут for, щелчок по метке функционально аналогичен щелчку по элементу, на который указывает атрибут for.Для полноты атрибута for следует установить значение id элемента формы.

Answer 2

Вместо того, чтобы пытаться заставить изображения работать с тегом <radio>, я бы просто поместил изображения туда, где вы хотите, привязал к ним различные варианты поведения, используя jQuery, и попросил их изменить скрытые поля ввода.Я думаю, что так будет намного проще.