xandeadx.ru Блог музицирующего веб-девелопера

CSS → Стилизация радиокнопок под кнопки

Опубликовано в

Пример стилизации радиокнопок под кнопки:

HTML:

<div class="radios-as-buttons">
    <div>
        <input type="radio" name="option" id="radio1" checked />
        <label for="radio1">Опция 1</label>
    </div>
    <div>
        <input type="radio" name="option" id="radio2" />
        <label for="radio2">Опция 2</label>
    </div>
    <div>
        <input type="radio" name="option" id="radio3" />
        <label for="radio3">Опция 3</label>
    </div>
</div>

CSS:

.radios-as-buttons div {
    float: left;
}
.radios-as-buttons input {
    position: absolute;
    left: -9999px;
}
.radios-as-buttons label {
    display: block;
    margin: 0 0 0 -1px;
    padding: 5px 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;
}
.radios-as-buttons input:checked + label {
    background: white;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
}
.radios-as-buttons div:first-child label {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.radios-as-buttons div:last-child label {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

Демо

Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании