Чекбоксы и радиокнопки на CSS

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

С помощью CSS и без применения изображений можно создавать красивое обрамление для галочек и радиокнопок, придавая им новый облик и сохраняя их функциональность внутри формы. Такие чекбоксы и радиокнопки функционируют успешно и передают данные, как обычные их аналоги.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

/* #### checkbox buttons #### */

input[type="checkbox"].css3checkbox{
  display: none;
}

label.toggler{ /* checkbox label */
  display: block;
  position: relative;
  padding-left: 32px; /* space to the left of label text */
  padding-top: 2px;
  margin-bottom: 1em; /* bottom spacing */
  cursor: pointer;
}

label.toggler::before{ /* flat box */
  content: '';
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  left: 0;
  top: 0;
}

label.toggler::after{ /* check mark inside flat box*/
  content: '\f00c'; /* fontAwesome icon font unicode. See //fortawesome.github.io/Font-Awesome/cheatsheet/ for others */
  position:absolute;
  left: 3px;
  top: 3px;
  font: bold 18px FontAwesome;
  color: #1B4977;
  width: 0; /* hide check mark initially */
  text-shadow: 0 0 2px #eee;
  overflow: hidden;
}

input[type="checkbox"]:checked + label.toggler::after{ /* check mark when checkbox is checked */
  transition: width 0.2s; /* CSS3 transition on width property */
  width: 25px; /* expand check mark to show it. Value should reflect that of container box */
}

/* #### radio buttons #### */

input[type="radio"].css3radio{
  display: none;
}

label.toggler_r{ /* radio label */
  display: block;
  position: relative;
  padding-left: 32px; /* space to the left of label text */
  padding-top: 2px;
  margin-bottom: 1em; /* bottom spacing */
  cursor: pointer;
}

label.toggler_r::before{ /* outer round circle */
  content: '';
  display: block;
  position:absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  border-radius: 25px;
  left: 0;
  top: 0;
}

label.toggler_r::after{ /* inner dark circle */
  content: '';
  position:absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  left: 5px;
  top: 5px;
  overflow: hidden;
  transition: all 0.2s;  /* CSS3 transition on dark circle */
}

input[type="radio"]:checked + label.toggler_r::after{ /* inner dark circle when radio is selected */
  background: #1B4977;
  box-shadow: 1px 1px 5px white;
}
</style>

В CSS Вы можете изменить некоторые параметры по своему усмотрению.

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть кнопки и галочки:


<input type="checkbox" id="checkbox1" class="css3checkbox">
<label class="toggler" for="checkbox1">Чекбокс 1</label>

<input type="checkbox" id="checkbox2" class="css3checkbox">
<label class="toggler" for="checkbox2">Чекбокс 2</label>

<input type="radio" id="radio1" name="myradios" class="css3radio">
<label class="toggler_r" for="radio1">Радиокнопка №1</label>

<input type="radio" id="radio2" name="myradios" class="css3radio">
<label class="toggler_r" for="radio2">Радиокнопка №2</label>

<input type="radio" id="radio3" name="myradios" class="css3radio">
<label class="toggler_r" for="radio3">Радиокнопка №3</label>

Радиокнопка (от англ. radio button), или переключатель, — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).

Флаговая кнопка, чекбокс (от англ. check box), галочка — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — «включено» и «выключено». Во включённом состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)).

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки