Прежде чем начать (по состоянию на январь 2015 г.)
Первоначальному вопросу и ответу теперь ~ 5 лет.Таким образом, это небольшое обновление.
Во-первых, существует несколько подходов, когда дело доходит до стилей флажков.основной принцип:
Вам нужно будет скрыть элемент управления флажка по умолчанию, стилизованный под ваш браузер, и не может быть переопределен каким-либо значимым образом с помощью CSS.
Когда скрытый элемент управления, вам все равно нужно будет иметь возможность обнаруживать и переключать его проверенное состояние
Проверенное состояние флажка должно отражаться стилемновый элемент
Решение (в принципе)
Вышесказанное может быть достигнуто несколькими способами - и вы часто будете слышать, что использование псевдоэлементов CSS3 - этоправильно.На самом деле, нет правильного или неправильного пути, это зависит от подхода, наиболее подходящего для контекста, в котором вы будете его использовать. Тем не менее, у меня есть предпочтительный.
ОбтеканиеВаш флажок в элементе label.Это будет означать, что даже когда он скрыт, вы все равно можете переключать его отмеченное состояние, щелкая в любом месте метки.
Скрыть свой флажок
Добавьте новый элемент после флажок, который вы будете соответственно стилизовать.Он должен появиться после флажка, чтобы его можно было выбрать с помощью CSS и стилизовать в зависимости от состояния :checked.CSS не может выбрать «назад».
Решение (в коде)
label input {
visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */
display:block;
height:0;
width:0;
position:absolute;
overflow:hidden;
}
label span {/* <-- style the artificial checkbox */
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
}
[type=checkbox]:checked + span {/* <-- style its checked state */
background: black;
}
<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>
Уточнение (с помощью значков)
Но эй!Я слышу, как ты кричишь.А что, если я хочу показать симпатичную галочку или крестик в коробке?И я не хочу использовать фоновые изображения!
Хорошо, это то, где псевдоэлементы CSS3 могут вступить в игру.Они поддерживают свойство content, которое позволяет вводить значки Unicode , представляющие любое состояние.Кроме того, вы можете использовать сторонний источник значков шрифтов, например, шрифт awesome (хотя убедитесь, что вы также установили соответствующий font-family, например, FontAwesome)
label input {
display: none; /* hide the default checkbox */
}
/* style the artificial checkbox */
label span {
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
position: relative;
}
/* style its checked state..with a ticked icon */
[type=checkbox]:checked + span:before {
content: '\2714';
position: absolute;
top: -5px;
left: 0;
}
<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>