Вот чистое решение CSS, которое не должно нарушать программы чтения с экрана или действия агента пользователя по умолчанию. Кроме того, это поддерживается в последних версиях больших четырех браузеров (и некоторых других, если вы добавите несколько дополнительных хаков, но я оставлю это вам на усмотрение; вероятно, не получит больше поддержки, чем IE8 +, поскольку он использует псевдоэлементы).
Идея состоит в том, чтобы скрыть фактический элемент формы (потому что браузеры делают жесткую замену внутренними стилями и пока не раскрывают все возможности стиля для CSS) и заменяют его тем, который нам нравится. Одним из побочных эффектов является то, что вы захотите отслеживать события изменения, а не события клика в вашем JS, если вам это нужно (но вы все равно это делали, верно?).
Поскольку ярлык привязан к щелчку элемента формы, он работает так, как и следовало ожидать, поэтому новый, удивительный флажок (::before) использует селекторы атрибутов ([checked]) в оригинале, чтобы проверить, является ли он checked. Когда этот флажок установлен, он будет отображать нашу замечательную галочку (::after).
Галочка (::after) использует ширину границы для толщины и высоту / ширину для создания элемента, похожего на галочку. Наконец, мы трансформируем поле 45 градусов так, чтобы оно соответствовало углу вверх.
Чтобы изменить цвет галочки, измените цвет границы в стиле ::after. Кроме того, если вы хотите, чтобы он всегда соответствовал вашему текстовому цвету, полностью удалите цвет рамки. Чтобы изменить радио, измените начальный цвет радиального градиента (тот, который не белый).
Также удивительным является то, что он привязан к размеру шрифта, поэтому, если ваш текст больше, он должен проскальзывать (хотя при использовании относительных размеров шрифта могут возникать ошибки округления, будьте осторожны)
Я включил основные стили для обоих проверяемых типов (флажок и радио).
HTML:
<fieldset>
<legend>Checkbox example</legend>
<input id="checkbox" type="checkbox"/>
<label for="checkbox">Some awesome checkbox label</label>
</fieldset>
<fieldset>
<legend>Radio example</legend>
<div>
<input id="radio1" type="radio" name="radio"/>
<label for="radio1">Some awesome radio option #1</label>
<div>
</div>
<input id="radio2" type="radio" name="radio"/>
<label for="radio2">Some awesome radio option #2</label>
</div>
</fieldset>
CSS:
label, input[type="radio"], input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 2ex;
width: 2ex;
background-color: white;
border: 1px solid rgb(166, 166, 166);
border-radius: 4px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
margin-right: 0.5em;
}
input[type="radio"]:checked + label::before {
background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}
input[type="radio"] + label::before {
border-radius: 50%;
}
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 1.2ex;
height: 0.4ex;
background: rgba(0, 0, 0, 0);
top: 0.9ex;
left: 0.4ex;
border: 3px solid #1062a4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Примечание: некропост, потому что это был первый вопрос, который возник, когда я пытался вспомнить, как я справлялся с этим в прошлом. ;)