Стилизация флажков при помощи CSS

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
1.013
Реакции
674
Баллы
113
Флажок, флаговая кнопка, чекбокс (от англ.check box), галочка — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. Во включённом состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)). По традиции флажок имеет квадратную форму. Рядом с флажком отображается его обозначение, обычно — подпись, реже — значок. Для увеличения площади активного элемента обычно одинаково реагирует на нажатие мышью как на сам флажок, так и на подпись к нему.

Код CSS, вставлять между <style> и </style>:
CSS:
.big_chk {
    cursor: pointer;
}
.big_chk input {
    padding: 0px;
    visibility: hidden;
}
.big_chk input+span {
    display: inline-block;
}
.big_chk input:checked+span {
    background: url('http://адрес_сайта/images/on.gif') no-repeat;
    margin-top: 1px;
    margin-left: -20px;
    margin-right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.size32 input+span {
    background: url([COLOR=rgb(184, 49, 47)]'[/COLOR]адрес_сайта/images/off.gif') no-repeat;
    margin-top: 1px;
    margin-left: -20px;
    margin-right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;   
}

Код HTML:
HTML:
<label class='big_chk size32'>
 <input name="style_i" type="checkbox" value=1><span></span><I>I</I>
</label>
 <label class='big_chk size32'>
<input name="style_u" type="checkbox" value=1><span></span><u>U</u>
</label>
адрес_сайта меняйте на свой адрес. Оригинальные изображения квадратные - сделаны круглыми при помощи css - свойства: border-radius: 50%;
У меня получилось так:
CHECKBOX_SCREEN.gif

Красные изображения -чекбокс выключен, с левого края зеленое изображение - чекбокс включен.
 
Сверху Снизу