Просмотр поста

Данная тема является более-менее логическим продолжением исчерпавшей себя jQuery--большой функционал за короткое в...
И посвящается она моим личным Frontend решениям более высокого уровня реализации. Надеюсь изложенная здесь информация будет полезной для вас.

Первое, о чем я хотел бы здесь написать: стилизация радиокнопок и чекбоксов на чистом CSS, без JS, дополнительной разметки и прочих извращений, в чем и состоит уникальность данного метода(по крайней мере пока в сети такого не встречал).

CSS код прост как 3 копейки:

Радио кнопки:

input[type=radio]{ position: relative; }
input[type=radio]:after{
  background: url('images/radios.png') no-repeat 0 0;
  content: '';
  position: absolute;
  top: -1px; right: -2px;
  height: 17px; width: 17px;
}
input[type=radio]:hover:after{ background-position: 0 -35px; }
input[type=radio]:checked:after{ background-position: 0 -17px; }

input[type=checkbox]{ position: relative; }
input[type=checkbox]:after{
  background: url('images/checkboxes.png') no-repeat 0 0;
  content: '';
  position: absolute;
  top: -1px; right: -2px;
  height: 17px; width: 17px;
}
input[type=checkbox]:hover:after{ background-position: 0 -34px; }
input[type=checkbox]:checked:after{ background-position: 0 -17px; }