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

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

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

По умолчанию

Цена за м²

Срок сдачи

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;
}

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

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

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

Вот вы сделали надписи некликабельными, поэтому они и неудобные) Я всегда щелкаю по надписям, не целюсь в кружки.

Илья Сидорчик

Андрей, спасибо, что написали!

Я тоже всегда щёлкаю по надписям, но предполагаю, большинство людей кликают в кружки. Чтобы это проверить, достаточно посмотреть карту кликов.

Дима Шишкин

Немного переделал ваше решение: http://codepen.io/shugich/pen/bZzjXP

  1. Удвоенные бордер пропадает за счет отрицательного марджина, а не за счет отключения правого бордера и включения его у последнего элемента. Это лучше в том плане, что цвет и размер бордера нужно указывать в одном месте, а не в начале и конце кода.
  2. Вместо инпута растянутого на 100% использовал лейбл. Лучше потому что нет кучи кода про растягивание инпута. Ну и лейбл надежней как мне кажется.
  3. Использовал инлайн-блок вместо float: left. Это избавляет нас от флоатов и больше не нужен clearfix.
  4. Убрал все префиксы. Честно говоря даже не знаю какие префиксы нужно нынче ставить, за меня думает автопрефиксер.
Илья Сидорчик

Дима, большое спасибо!

Популярное