Ответ 1
Здесь используется чистое решение CSS, которое не должно прерывать программы чтения с экрана или действия пользователя по умолчанию. Кроме того, это поддерживается в последних версиях больших 4 браузеров (и несколько других, если вы добавляете дополнительные хаки, но я оставлю это вам, чтобы выяснить, вероятно, не получит больше поддержки IE8 +, поскольку он использует псевдоэлементы).
Идея состоит в том, чтобы скрыть фактический элемент формы (поскольку браузеры жестко заменяются внутренними стилями и не раскрывают все возможности стиля css еще) и заменяют его на тот, который нам нравится. Один из побочных эффектов заключается в том, что вы захотите отслеживать события изменений, а не щелкнуть события в своем JS, если вам это нужно (но вы все равно правильно?).
Поскольку ярлык привязан к элементу формы, щелчок по нему работает так, как и следовало ожидать, поэтому новый, отличный, флажок (::before) злоупотребляет селекторами атрибутов ([checked]) на оригинале, чтобы проверить, есть ли он checked. Когда он будет установлен, он отобразит наш флажок awesomer (::after).
Галочка (::after) злоупотребляет шириной границы для толщины и высоты/ширины для создания галочки как элемента. Наконец, мы преобразуем поле 45deg в соответствие с соответствующим углом.
Чтобы изменить цвет значка, измените цвет рамки в стиле ::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);
}
Боковое примечание: некропость, потому что это был первый вопрос, который возник, когда я пытался вспомнить, как я снял это в прошлом.;)