CSS: Делаем radio инпут в виде кнопок.

Часто бывает нужно сделать так, что бы какие-то html элементы имели нестандартный вид.

Раньше для этого мастерили много JavaScript кода, который делал нужные подмены. Теперь же можно на чистом CSS это все организовать. Причем работоспособность гарантированна во всех современных браузерах.
Для чего это нам может понадобиться? Вариантов применения масса от красивого меню до выбора необходимых опций у товаров для подсчета цены. Например берем аренда авто Харьков и для каждой машины делаем возможность выбрать, необходимые в аренде авто, опции. И красиво и пользователю удобно как со стационарного компьютера так и с мобильного устройства.

Итак, нам необходимо сделать отображение стандартных input radio в виде стилизированных кнопок.

Создаем небольшой файл стилей:

.radio_buttons {
    margin: 20px;
    font: 14px Tahoma;
}
.radio_buttons div {
    float: left;
}
.radio_buttons input {
    position: absolute;
    left: -9999px;
}
.radio_buttons label {
    display: block;
    margin: 0 0 0 -1px;
    padding: 8px 10px;
    border: 1px solid #BBBBBB;
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    cursor: pointer;
}
.radio_buttons input:checked + label {
    background: white;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
}
.radio_buttons div:first-child label {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.radio_buttons div:last-child label {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

А теперь все стили применим на html разметку:

<div class="radio_buttons">
    <div>
        <input type="radio" name="option" id="radio1" checked />
        <label for="radio1">Текст radio кнопки №1</label>
    </div>
    <div>
        <input type="radio" name="option" id="radio2" />
        <label for="radio2">radio кнопка №2</label>
    </div>
    <div>
        <input type="radio" name="option" id="radio3" />
        <label for="radio3">Еще текст radio кнопки №3</label>
    </div>
        <div>
        <input type="radio" name="option" id="radio4" />
        <label for="radio4">radio №4</label>
    </div>
</div>

Таким простым способом мы добились нужного эффекта.