Используем Font Awesome для создания пользовательских radio и checkbox

566
views

Как по мне, так один из самых изящных способов кастомизации radio и checkbox кнопок. Так как он абсолютно не требует javascript кода, а верстка выглядит максимально чистой и семантически правильной.

Верстка:

<legend>Пример радио кнопок</legend>
<label for="label_1">
  <input type="radio" name="demo" id="label_1" value="foo"/>
  <span>Бодрый</span>
</label>
<label for="label_2">
  <input type="radio" name="demo" id="label_2" value="bar"/>
  <span>Сонный</span>
</label>
<label for="label_3">
  <input type="radio" name="demo" id="label_3" value="foobar"/>
  <span>Голодный</span>
</label>

<legend>Пример чек боксов</legend>
<label for="label_4">
  <input type="checkbox" name="animalc" id="label_4" value="1"/>
  <span>Поспать</span>
</label>
<label for="label_5">
  <input type="checkbox" name="animalc" id="label_5" value="2"/>
  <span>Поесть</span>
</label>
<label for="label_6">
  <input type="checkbox" name="animalc" id="label_6" value="3"/>
  <span>Еще поспать</span>
</label>

CSS:

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 13px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

label {
    display: block;
}
legend {
    margin-top:10px;
}

Не забываем подключить иконочный шрифт Font Awesome перед вашим css.

Результат можно посмотреть на jsfiddle