HTML/CSS

Стилизация radio button

Несколько примеров изменения вида радио кнопок на чистом CSS. Единственное неудобство метода в том, что приходится указывать уникальные id.

1

Стандартные элементы

Понадобятся всего два изображения, которые можно объединить в спрайт. Состояния заблокированного элемента и при наведении можно сделать CSS фильтрами.

<div class="form_radio">
    <input id="radio-1" type="radio" name="radio" value="1" checked>
    <label for="radio-1">Radio button 1</label>
</div>

<div class="form_radio">
    <input id="radio-2" type="radio" name="radio" value="2">
    <label for="radio-2">Radio button 2</label>
</div>

<div class="form_radio">
    <input id="radio-3" type="radio" name="radio" value="3">
    <label for="radio-3">Radio button 3</label>
</div>

<div class="form_radio">
    <input id="radio-4" type="radio" name="radio" value="4" disabled>
    <label for="radio-4">Radio disabled</label>
</div>
.form_radio {
    margin-bottom: 10px;
}
.form_radio input[type=radio] {
    display: none;
}
.form_radio label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 0;
    line-height: 18px;
    user-select: none;
}
.form_radio label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 18px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background: url(https://snipp.ru/img/radio-1.png) 0 0 no-repeat;
}

/* Checked */
.form_radio input[type=radio]:checked + label:before {
    background: url(https://snipp.ru/img/radio-2.png) 0 0 no-repeat;
}

/* Hover */
.form_radio label:hover:before {
    filter: brightness(120%);
}

/* Disabled */
.form_radio input[type=radio]:disabled + label:before {
    filter: grayscale(100%);
}
2

Radio в виде кнопок

<div class="form_radio_btn">
    <input id="radio-1" type="radio" name="radio" value="1" checked>
    <label for="radio-1">Radio button 1</label>
</div>

<div class="form_radio_btn">
    <input id="radio-2" type="radio" name="radio" value="2">
    <label for="radio-2">Radio button 2</label>
</div>

<div class="form_radio_btn">
    <input id="radio-3" type="radio" name="radio" value="3">
    <label for="radio-3">Radio button 3</label>
</div>

<div class="form_radio_btn">
    <input id="radio-4" type="radio" name="radio" value="4" disabled>
    <label for="radio-4">Disabled</label>
</div>
.form_radio_btn {
    display: inline-block;
    margin-right: 10px;
}
.form_radio_btn input[type=radio] {
    display: none;
}
.form_radio_btn label {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    line-height: 34px;
    border: 1px solid #999;
    border-radius: 6px;
    user-select: none;
}

/* Checked */
.form_radio_btn input[type=radio]:checked + label {
    background: #ffe0a6;
}

/* Hover */
.form_radio_btn label:hover {
    color: #666;
}

/* Disabled */
.form_radio_btn input[type=radio]:disabled + label {
    background: #efefef;
    color: #666;
}
3

Группа кнопок

<div class="form_radio_group">
    <div class="form_radio_group-item">
        <input id="radio-1" type="radio" name="radio" value="1" checked>
        <label for="radio-1">Radio button 1</label>
    </div>
    <div class="form_radio_group-item">
        <input id="radio-2" type="radio" name="radio" value="2">
        <label for="radio-2">Radio button 2</label>
    </div>
    <div class="form_radio_group-item">
        <input id="radio-3" type="radio" name="radio" value="3">
        <label for="radio-3">Radio button 3</label>
    </div>
    <div class="form_radio_group-item">
        <input id="radio-4" type="radio" name="radio" value="4" disabled>
        <label for="radio-4">Disabled</label>
    </div>
</div>
.form_radio_group {
    display: inline-block;
    overflow: hidden;
}
.form_radio_group-item {
    display: inline-block;
    float: left;    
}
.form_radio_group input[type=radio] {
    display: none;
}
.form_radio_group label {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    line-height: 34px;
    border: 1px solid #999;
    border-right: none;
    user-select: none;
}

.form_radio_group .form_radio_group-item:first-child label {
    border-radius: 6px 0 0 6px;
}
.form_radio_group .form_radio_group-item:last-child label {
    border-radius: 0 6px 6px 0;
    border-right: 1px solid #999;
}

/* Checked */
.form_radio_group input[type=radio]:checked + label {
    background: #ffe0a6;
}

/* Hover */
.form_radio_group label:hover {
    color: #666;
}

/* Disabled */
.form_radio_group input[type=radio]:disabled + label {
    background: #efefef;
    color: #666;
}
4

Переключатель

<div class="form_toggle">
    <div class="form_toggle-item item-1">
        <input id="fid-1" type="radio" name="radio" value="off" checked>
        <label for="fid-1">OFF</label>
    </div>
    <div class="form_toggle-item item-2">
        <input id="fid-2" type="radio" name="radio" value="on">
        <label for="fid-2">ON</label>
    </div>
</div>
.form_toggle {
    display: inline-block;
    overflow: hidden;
}
.form_toggle-item {
    float: left;
    display: inline-block;
}
.form_toggle-item input[type=radio] {
    display: none;
}
.form_toggle-item label {
    display: inline-block;
    padding: 0px 15px;   
    line-height: 34px;    
    border: 1px solid #999;
    border-right: none;
    cursor: pointer;
    user-select: none;   
}

.form_toggle .item-1 label {
    border-radius: 6px 0 0 6px;
}
.form_toggle .item-2 label {
    border-radius: 0 6px 6px 0;
    border-right: 1px solid #999;
}

/* Checked */
.form_toggle .item-1 input[type=radio]:checked + label {
    background: #ffc5c5;
}
.form_toggle .item-2 input[type=radio]:checked + label {
    background: #bbffbb;
}
11 апреля 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.