Делаем красивые кнопки выбора (стилизация radio input)

yazu css/html/js 6749

css

Сегодня я покажу пример как всего в несколько строчек кода сделать приятные и удобные кнопки выбора для вашего сайта. Они отлично впишутся как в десктопную версию вашего сайта так и в мобильную.

Не могу не отметить, что делать стандартные Radio-кнопки или, тем более, выпадающие списки для выбора из 2-4 вариантов не очень удобно и красиво. Поэтому я решил показать вам как можно сделать подобные кнопки выбора значительно удобнее.

Разметка

Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container. Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

<form class="form">
  <div class="radio-container">
      <div class="form-item radio-btn nth-2">
      <input type="radio" name="option1" id="radio1" checked>
      <label for="radio1">radio1</label>
    </div>
      <div class="form-item radio-btn nth-2">
      <input type="radio" name="option1" id="radio2">
      <label for="radio2">radio2</label>
    </div>
  </div>
</form>

<br>

<form class="form">
  <div class="radio-container">
    <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio3" checked>
      <label for="radio3">radio3</label>
    </div>
      <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio4">
      <label for="radio4">radio4</label>
    </div>
      <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio5">
      <label for="radio5">radio5</label>
    </div>
  </div>
</form>

<br>

<form class="form">
  <div class="radio-container">
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio6" checked>
      <label for="radio6">radio6</label>
    </div>
      <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio7">
      <label for="radio7">radio7</label>
    </div>
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio8">
      <label for="radio8">radio8</label>
    </div>
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio9">
      <label for="radio9">radio9</label>
    </div>
  </div>
</form>

<label for="radio1">radio1</label>

</div>

<label for="radio2">radio2</label>

</div>

</form>

<br>

<label for="radio3">radio3</label>

</div>

<label for="radio4">radio4</label>

</div>

<label for="radio5">radio5</label>

</div>

</form>

<br>

<label for="radio6">radio6</label>

</div>

<label for="radio7">radio7</label>

</div>

<label for="radio8">radio8</label>

</div>

<label for="radio9">radio9</label>

</div>

</form>

Стили

Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none. Теперь пользователю отображаются только элементы label, если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

При помощи свойства float: left;, применённого к элементам label. Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
Использовать свойство display: inline-block;, для элементов label. Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
Для родительского контейнера (в моём случае это radio-container) воспользоваться свойством display: flex;

Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label, иначе css свойство, приведённое ниже, работать не будет.

Для того чтобы выделить активный элемент используем следующий приём:

.radio-container .radio-btn input:checked + label{
  background-color: #0082fe;
  color: #fff;
}

.radio-container .radio-btn input:checked + label{

background-color: #0082fe;

color: #fff;

}

Эта запись означает, что вложенные стили будут применяться только к элементу label и только в том случае, если элемент radio, к которому относится label, активен в данный момент.

Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

Результат

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

Можно немного изменить стили и получить такой результат:

Как видите, вы можете легко изменить внешний вид получившихся кнопок как вам угодно.

Данный приём очень хорошо работает когда у вас есть всего 2-4 варианта выбора, на пример гендерная принадлежность пользователя, выбор из вариантов «Да», «Нет», период оповещения (ежедневно, еженедельно, ежемесячно) и так далее. При больше количестве элементов советую воспользоваться выпадающим списком, это будет и удобнее для пользователя и красивее выглядеть на вашем сайте.

comments powered by HyperComments

Предыдущий пост: 5 отличных эффектов для изображений с помощью CSS форм и фильтров Следующий пост: Делаем адаптивные табы без javascript и грязных хаков