Кастомизация radiobutton без JS

Однажды, у меня возникла задача, сделать на форме сайта выбор одного из нескольких цветов. Казалось бы, нет ничего проще. Элемент radiobutton, как нельзя лучше, подходит для этой задачи, нужно только чуть-чуть его кастомизировать. Тут-то и начинаются проблемы. Дело в том, что отрисовкой элементов radiobutton и checkbutton управляет не браузер, а ОС. Соответственно, большинство свойств CSS (например, background-color) на них не действует.

В интернете я нашел множество способов кастомизации radiobutton, но все они показались мне слишком сложными, поэтому я решил придумать свой.

Моя идея основана на том факте, что когда пользователь кликает по подписи label, radiobutton переключается. Значит можно кастомизировать не radiobutton, а label.

Рассмотрим пример кода HTML:

<input type="radio" name="color" value="#0000ff" id="blue"/>
<label for="blue" class="blue"></label>
<input type="radio" name="color" value="#00ffff" id="cyan"/>
<label for="cyan" class="cyan"></label>

Здесь нет ничего необычного. Обычные radiobutton и подписи к ним.

Теперь CSS:

// скрываем radiobutton
input{display: none;}

// кастомизируем label
label{
    width: 20px;
    height: 20px;
}
label.blue{background-color: blue;}
label.cyan{background-color: #00ffff;}

Здесь мы скрываем radiobutton и рисуем, как нам хочется label. Всё просто и элегантно.

На этом можно было бы закончит пост, если бы не одно «но».

Пара гнилых помидоров в сторону Apple

Мир был бы хорош и прекрасен, если бы в нём не было одной корпорации у которой особый путь развития. Это корпорация Apple, которая отказывает своим пользователям в праве тыкать по label. В следствии чего, мой способ не работает на iPhone и iPad. Самое интересное, что Safari на Windows пережевывает всё правильно. К сожалению не было под рукой ни одного iMac, чтобы проверить.

Специально для хипстеров пришлось таки применить JS (код рассчитан на использование в связке с jQuery):

    var deviceAgent = navigator.userAgent.toLowerCase();
    var iOS = deviceAgent.match(/(iphone|ipod|ipad)/);
    if (iOS) {
        $('label').click(function (event) {
            $('#' + $(event.target).attr('for')).attr('checked', true).change();
        });
    }

Пример использования

Long Twit — простой сервис, который рендерит текст в картинку и отправляет в Twitter. Можно выбрать цвет текста и фона.

Автор: kefirfromperm