1 заметка с тегом

как сверстать

Как сверстать переключатель

Расскажу, почему радиокнопки плохие, чем лучше переключатель и как его сверстать без Яваскрипта.

Почему радиокнопки плохие

По умолчанию

Цена за м²

Срок сдачи

1. Неудобные. Человек должен попадать в маленькие кружки. Если сделать подписи кликабельными, люди всё равно будут целиться в шарики.

2. Непонятные. Кружки отдалены от подписей, если расположить элементы горизонтально — будет путаница.

3. Некомпактные. Требуют вертикального расположения и из-за этого занимают много места.

Чем лучше переключатель

По умолчанию

Цена за м²

Срок сдачи

1. Удобный. Имеет большие визуальные точки прицеливания.

2. Понятный. Явно подсвечивает выбранный элемент и показывает связь между подписью и мишенью.

3. Компактный. Занимает одну строку вместо трёх.

Также он больше похож на настоящие механические радиокнопки.

Как сверстать без Яваскрипта

ХТМЛ:

<div class="radio">
    <div>
        <input checked="checked" name="catalog" type="radio" value="relevance"><span>По умолчанию</span>
    </div>
    <div>
        <input name="catalog" type="radio" value="price_per_meter"><span>Цена за м²</span>
    </div>
    <div>
        <input name="catalog" type="radio" value="commissioning_date"><span>Срок сдачи</span>
    </div>
</div>

ЦСС:

.radio::after
{
    display: table;
    content: "";
    clear: both;
}

.radio div
{
    float: left;
    position: relative;
    border: 1px solid #007aff;
    border-right: none;
    background: #fff;
    color: #007aff;
}

.radio div span
{
    display: block;
    padding: .15em 1em .2em;
}

.radio div input
{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
    opacity: 0;
    list-style: none;
    cursor: pointer;
}

.radio div input:hover + span
{
    background: rgba(0, 122, 255, .1);
}

.radio div input:checked + span
{
    background: #007aff;
    color: #fff;
}

.radio div input:checked
{
    cursor: default;
}

.radio div:first-child
{
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.radio div:last-child
{
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: 1px solid #007aff;
}

Радиокнопки → переключалки

Спасибо за помощь Алексею Головко.

2016   веб-дизайн   как сверстать   переключатель   радиокнопки