CSS лэйблы и чекбоксы

Показать код CSS




radio 1
radio 2
radio 3


checkbox 1
checkbox 2
checkbox 3
<div class="UNI_checkbox">
    <input type="radio" name="some" value="1">
    <div class="fake"></div>
</div>


radio 1
radio 2
radio 3


switcher 1
switcher 2
switcher 3
<div class="UNI_switcher">
    <input type="checkbox" name="some" value="1">
    <div class="fake"></div>
</div>


multi 1
multi 2
multi 3
<div class="UNI_multiple">
    <input type="radio" name="some" value="1">
    <input type="radio" name="some" value="2">
    <input type="radio" name="some" value="3">
    <div class="fake"></div>
</div>

Старые стили

style.css

HTML buttons, checkboxes, radio переключатели, иконки загрузки и многое другое на чистом CSS Это поможет вам в веб вёрстке и оформлении вашего сайта а так же облегчит понимание и встраивание на страницу необходимых элементов разметки и таблицы стилей и вообще я пишу этот текст для лучшего SEO продвижения этого юрла поэтому странно что вы всё ещё это читаете, так вот, ...для этого необходимо взять необходимую часть стилей из файла style.css и разместить html нужного компонента в своем коде, ну и отрихтовать немного конечно же. Как говориться: кувалда и напильник вам в помощь.

Значек загрузки на чистом CSS

<div class="label_load"></div>
CheckBox ON
CheckBox OFF
CheckBox ON
CheckBox OFF
CheckBox ON
CheckBox OFF
Radio 1
Radio 1
Radio 2
Radio 2
Radio 3
Radio 3

Кнопки переключатели на CSS

<div class="label_button">
 <input type="checkbox" name="myname" value="101">
 <div class="buton on">CheckBox ON</div>
 <div class="butof of">CheckBox OFF</div>
</div>


<div class="label_button">
 <input type="radio" name="butname" value="1">
 <div class="buton on">Radio ON</div>
 <div class="butof of">Radio OFF</div>
</div>

Мульти-переключатель на чистом CSS

<div class="label_checker">
 <div class="row">
  <div class="cell">
   <input type="radio" name="n" value="0" checked>
   <div class="fake"></div>
  </div>
  <div class="cell">
   <input type="radio" name="n" value="1">
   <div class="fake"></div>
  </div>
  <div class="cell">
   <input type="radio" name="n" value="2">
   <div class="fake"></div>
  </div>
 </div>
</div>

Двух-режимный переключатель на чистом CSS

<div class="label_checkbox">
 <input type="radio" name="myname" class="f" value="0">
 <input type="radio" name="myname" class="t" value="1">
 <div class="fake"></div>
</div>
<div class="label_checkbox">
 <input type="checkbox" name="myname" value="101">
 <div class="fake"></div>
</div>
Включено
Отключено