Как сверстать переключатель
Расскажу, почему радиокнопки плохие, чем лучше переключатель и как его сверстать без Яваскрипта.
Почему радиокнопки плохие
По умолчанию
Цена за м²
Срок сдачи
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;
}
Радиокнопки → переключалки
Спасибо за помощь Алексею Головко.
Вот вы сделали надписи некликабельными, поэтому они и неудобные) Я всегда щелкаю по надписям, не целюсь в кружки.
Андрей, спасибо, что написали!
Я тоже всегда щёлкаю по надписям, но предполагаю, большинство людей кликают в кружки. Чтобы это проверить, достаточно посмотреть карту кликов.
Немного переделал ваше решение: http://codepen.io/shugich/pen/bZzjXP
Дима, большое спасибо!