Как оформить флажок с помощью CSS

Я пытаюсь оформить флажок с помощью следующего:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Ответ 1

UPDATE:

Приведенный ниже ответ ссылается на положение дел до широкого распространения CSS 3. В современных браузерах (включая Internet Explorer 9 и более поздние версии) проще создавать замены флажков в соответствии с предпочтительным стилем без использования JavaScript.

Вот несколько полезных ссылок:

Стоит отметить, что фундаментальная проблема не изменилась. Вы по-прежнему не можете применять стили (границы и т.д.) Непосредственно к элементу флажка, и эти стили влияют на отображение флажка HTML. Что изменилось, тем не менее, теперь стало возможным скрыть фактический флажок и заменить его собственным элементом стиля, используя только CSS. В частности, поскольку CSS теперь имеет широко поддерживаемый селектор :checked, вы можете сделать так, чтобы ваша замена корректно отражала проверенный статус поля.

СТАРЫЙ ОТВЕТ

Вот полезная статья о флажках стиля. По сути, этот автор обнаружил, что он сильно варьируется от браузера к браузеру, и что многие браузеры всегда отображают флажок по умолчанию, независимо от того, как вы его стилизуете. Так что на самом деле не так просто.

Нетрудно представить обходной путь, при котором вы бы использовали JavaScript для наложения изображения на флажок, а щелчки по этому изображению приводили к тому, чтобы был установлен настоящий флажок. Пользователи без JavaScript увидят флажок по умолчанию.

Отредактировано, чтобы добавить: здесь хороший скрипт, который делает это для вас; он скрывает реальный элемент флажка, заменяет его стилизованным диапазоном и перенаправляет события щелчка.

Ответ 2

Есть способ сделать это, используя только CSS. Мы можем (ab) использовать элемент label и стилизовать этот элемент. Предостережение заключается в том, что это не будет работать для Internet Explorer 8 и более ранних версий.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

Ответ 3

Вы можете добиться довольно крутого пользовательского эффекта флажка, используя новые способности, которые идут с псевдо-классами :after и :before. Преимущество этого в том, что вам не нужно ничего добавлять в DOM, только стандартный флажок.

Обратите внимание, что это будет работать только для совместимых браузеров. Я считаю, что это связано с тем, что некоторые браузеры не позволяют устанавливать :after и :before для элементов ввода. К сожалению, это означает, что на данный момент поддерживаются только браузеры WebKit. Firefox + Internet Explorer будет по-прежнему разрешать работу флажков, просто не применяя стиль, и мы надеемся, что это изменится в будущем (код не использует префиксы поставщиков).

Это только решение для браузера WebKit (Chrome, Safari, мобильные браузеры)

Смотрите пример Fiddle

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Ответ 4

Прежде чем начать (по состоянию на январь 2015 года)

Первоначальному вопросу и ответу сейчас ~ 5 лет. Таким образом, это немного обновление.

Во-первых, существует множество подходов, когда дело доходит до стилизации флажков. Основной принцип:

Вам нужно будет скрыть элемент управления флажок по умолчанию, который стилизован вашим браузером, и не может быть переопределен каким-либо значимым способом с помощью CSS.
Со скрытым элементом управления вам все равно нужно будет иметь возможность обнаруживать и переключать его проверенное состояние
Проверенное состояние флажка должно быть отражено с помощью стилизации нового элемента.

Решение (в принципе)

Вышесказанное может быть достигнуто несколькими способами - и вы часто будете слышать, что использование псевдоэлементов CSS3 - правильный путь. На самом деле, нет правильного или неправильного пути, это зависит от подхода, наиболее подходящего для контекста, в котором вы будете его использовать. Тем не менее, у меня есть предпочтительный.

Оберните ваш флажок в элемент label. Это будет означать, что даже когда он скрыт, вы все равно можете переключать его проверенное состояние, щелкая в любом месте метки.
Скрыть свой флажок
Добавьте новый элемент после флажка, который вы будете соответствующим образом стилизовать. Он должен появиться после флажка, чтобы его можно было выбрать с помощью CSS и стилизовать в зависимости от состояния :checked. CSS не может выбрать "назад".

Решение (в коде)

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow 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>

Ответ 5

Я бы следовал совету ответа SW4 - чтобы скрыть флажок и покрыть его пользовательским диапазоном, предлагая этот HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

Обтекание метки аккуратно позволяет щелкать текст без необходимости связывания атрибута "for-id". Тем не мение,

Не скрывайте его, используя `visibility: hidden` или `display: none`

Это работает, нажав или нажав, но это неэффективный способ использовать флажки. Некоторые люди все еще используют гораздо более эффективный Tab для перемещения фокуса, Space для активации, и сокрытие с помощью этого метода отключает его. Если форма длинная, можно сохранить tabindex чтобы использовать tabindex или accesskey. И если вы наблюдаете поведение системного флажка, то при наведении появляется приличная тень. Хорошо стилизованный флажок должен следовать за этим поведением.

Ответ cobberboy рекомендует Font Awesome, который обычно лучше растрового изображения, поскольку шрифты являются масштабируемыми векторами. Работая с HTML выше, я бы предложил следующие правила CSS:

Скрыть флажки
```
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
```
Я использую только отрицательный z-index так как в моем примере используется достаточно большая обложка флажка, чтобы полностью покрыть его. Я не рекомендую left: -999px так как он не может быть использован повторно в каждом макете. Ответ Бушана предоставляет пуленепробиваемый способ скрыть его и убедить браузер использовать tabindex, так что это хорошая альтернатива. Во всяком случае, оба это просто взломать. Правильный путь сегодня - это appearance: none, см. Ответ Joost:
```
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
```

Метка флажка стиля

input[type="checkbox"] + span {
  font: 16pt sans-serif;
  color: #000;
}

Добавить скин флажка
```
input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: '\00f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}
```
\00f096 - Font Awesome square-o, отступ настраивается так, чтобы обеспечить четкий контур на фокусе (см. Ниже).
Добавить флажок отмеченный скин
```
input[type="checkbox"]:checked + span:before {
  content: '\00f046';
}
```
\00f046 - это Font Awesome check-square-o, ширина которого не такая же, как у square-o, что является причиной описанного выше стиля ширины.
Добавить контур фокуса
```
input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
```
Safari не предоставляет эту функцию (см. Комментарий @Jason Sankey), вы должны использовать window.navigator чтобы обнаружить браузер и пропустить его, если это Safari.
Установить серый цвет для отключенного флажка
```
input[type="checkbox"]:disabled + span {
  color: #999;
}
```
Установить тень при наведении на флажок без отключения
```
input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}
```

Демо Фиддл

Попробуйте навести курсор мыши на флажки и используйте Tab и Shift + Tab для перемещения и Space для переключения.

Ответ 6

С помощью элемента label вы можете стилизовать флажки с помощью небольшой хитрости, пример которой приведен ниже:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

Ответ 7

Простое в реализации и легко настраиваемое решение

После долгих поисков и испытаний я получил это решение, которое легко внедрить и настроить. В этом решении:

Вам не нужны внешние библиотеки и файлы
Вам не нужно добавлять дополнительный HTML на вашей странице
Вам не нужно менять имена флажков и идентификатор

Просто поместите текущий CSS вверху страницы, и стиль всех флажков изменится следующим образом:

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

Ответ 8

Вы можете избежать добавления дополнительной разметки. Это работает везде, кроме IE для рабочего стола (но работает в IE для Windows Phone и Microsoft Edge) с помощью CSS appearance:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

Ответ 9

Я предпочитаю использовать иконки шрифтов (например, FontAwesome), поскольку их цвета легко изменить с помощью CSS, и они действительно хорошо масштабируются на устройствах с высокой плотностью пикселей. Итак, вот еще один чистый вариант CSS, использующий методы, аналогичные приведенным выше.

(Ниже приведено статическое изображение, поэтому вы можете визуализировать результат; см. JSFiddle для интерактивной версии.)

Как и в других решениях, он использует элемент label. Смежный span содержит наш флажок.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Ответ 10

Недавно я нашел довольно интересное решение проблемы.

Вы можете использовать appearance: none; чтобы отключить стиль по умолчанию, а затем написать свой собственный, как описано здесь (Пример 4).

Пример скрипки

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

Ответ 11

Мое решение

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

Ответ 12

Вот простое решение CSS без кода jQuery или JavaScript.

Я использую значки FontAwseome, но вы можете использовать любое изображение

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

Ответ 13

На мой взгляд, это самый простой способ для создания стиля флажка. Просто добавьте :after и :checked:after CSS на основе вашего дизайна.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}

<input type="checkbox"> <span>Select Text</span>

Ответ 14

С чистым CSS, ничего необычного с :before и :after, без преобразований, вы можете отключить внешний вид по умолчанию, а затем оформить его с помощью встроенного фонового изображения, как в следующем примере. Это работает в Chrome, Firefox, Safari, а теперь и Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>

Ответ 15

Я думаю, что самый простой способ сделать это, стилизовав label и сделав checkbox невидимым.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

checkbox, даже если он скрыт, все равно будет доступен, и его значение будет отправлено при отправке формы. Для старых браузеров вам, возможно, придется изменить класс label на checked с использованием JavaScript, потому что я не думаю, что старые версии Internet Explorer понимают ::checked checkbox.

Ответ 16

Хлоп! Все эти обходные пути привели меня к выводу, что флажок HTML отстой, если вы хотите его стилизовать.

Как предупреждение, это не реализация CSS. Я просто подумала, что поделюсь обходным решением, которое я придумала на случай, если кто-то еще может найти его полезным.

Я использовал элемент canvas HTML5.

Плюсом этого является то, что вам не нужно использовать внешние изображения и, возможно, можно сэкономить некоторую полосу пропускания.

Недостатком является то, что если браузер по какой-то причине не может правильно отобразить его, то не существует запасного варианта. Хотя вопрос о том, остается ли это проблемой в 2017 году, остается спорным.

Обновить

Я нашел старый код довольно уродливым, поэтому я решил переписать его.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Вот рабочая демка.

В новой версии используются прототипы и дифференциальное наследование для создания эффективной системы создания флажков. Чтобы создать флажок:

var my_checkbox = Checkbox.create();

Это немедленно добавит флажок в DOM и подключит события. Чтобы узнать, установлен ли флажок:

my_checkbox.is_checked(); // True if checked, else false

Также важно отметить, что я избавился от циклы.

Обновление 2

В последнем обновлении я не упомянул, что использование холста имеет больше преимуществ, чем просто установка флажка, который выглядит так, как вы хотите. Вы также можете создавать флажки с несколькими состояниями, если хотите.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

Я немного изменил Checkbox использованный в последнем фрагменте, чтобы он был более универсальным, что позволило "расширить" его с помощью флажка, который имеет 3 состояния. Здесь демо. Как видите, он уже обладает большей функциональностью, чем встроенный флажок.

Что нужно учитывать при выборе между JavaScript и CSS.

Старый, плохо разработанный код

Рабочая Демо

Сначала настройте холст

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Затем разработайте способ обновления самого холста.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

Последняя часть - сделать его интерактивным. К счастью, все довольно просто:

canvas.onclick = function(){
  checked = !checked;
}

Здесь у вас могут возникнуть проблемы в IE из-за их странной модели обработки событий в JavaScript.

Я надеюсь, что это помогает кому-то; это определенно соответствовало моим потребностям.

Ответ 17

Измените стиль флажка с простым CSS3, не требуется никаких манипуляций с JS и HTML.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form class="form">
  <input type="checkbox" />
</form>

Ответ 18

Простой и легкий шаблон:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

Ответ 19

Не требуется JavaScript или JQuery.

Измените свой стиль флажка простым способом.

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

Вот ссылка JsFiddle: https://jsfiddle.net/05y2bge3/

Ответ 20

Вот версия для CSS/HTML, никакой jQuery или JavaScript не требуется вообще, Простой и чистый HTML и действительно простой и короткий CSS.

Вот JSFiddle

http://jsfiddle.net/v71kn3pr/

Вот HTML-код:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

Вот CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

Это может быть адаптировано, чтобы иметь возможность иметь отдельные радио или флажки, группы флажков и группы переключателей, а также.

Этот html/css позволит вам также фиксировать щелчок на ярлыке, поэтому флажок будет отмечен и снят, даже если вы нажмете только на ярлык.

Этот тип переключателей/переключателей отлично работает с любой формой, без проблем. Были также протестированы с использованием PHP, ASP.NET(.aspx), JavaServer Faces и ColdFusion.

Ответ 21

Это самый простой способ, и вы можете выбрать, какие флажки придать этому стилю.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

Ответ 22

**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

Ответ 23

Предупреждение: на момент написания было правдоподобно, но тем временем все продвигалось.

Современные браузеры AFAIK отображают флажки, используя собственный ОС, поэтому нет способа их стилизовать.

Ответ 24

input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}

Ответ 25

Нет, вы все еще не можете стилизовать сам флажок, но я (наконец-то) понял, как оформить иллюзию, сохраняя при этом функциональность щелчка флажка. Это означает, что вы можете переключать его, даже если курсор не совсем неподвижен, не рискуя выделять текст или вызывая перетаскивание!

Это решение, вероятно, также подходит для радио кнопок.

Следующее работает в Internet Explorer 9, Firefox 30.0 и Chrome 40.0.2214.91 и является лишь базовым примером. Вы все еще можете использовать его в сочетании с фоновыми изображениями и псевдоэлементами.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

Ответ 26

Поскольку браузеры, такие как Edge и Firefox, не поддерживают теги ввода: before: after on, здесь есть альтернатива исключительно с HTML и CSS. Конечно, вы должны редактировать CSS в соответствии с вашими требованиями.

Сделайте HTML для флажка следующим образом:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Примените этот стиль для флажка, чтобы изменить цвет метки

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

Ответ 27

Кажется, вы можете изменить цвет флажка в оттенках серого, используя только CSS.

Следующее преобразует флажки из черного в серый (что было примерно то, что я хотел):

input[type="checkbox"] {
    opacity: .5;
}

Ответ 28

Вы можете просто использовать appearance: none в современных браузерах, чтобы не было стилей по умолчанию и все ваши стили были применены правильно:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

Ответ 29

Вы можете использовать iCheck. Это настраиваемые флажки и переключатели для jQuery & Zepto, и, возможно, это вам поможет.

Убедитесь, что jQuery v1. 7+ загружен до icheck.js

Выберите цветовую схему, доступно 10 различных стилей:
- Черный - minimal.css
- Красный - red.css
- Зеленый - зеленый
- Синий - синий .css
- Aero - aero.css
- Серый - grey.css
- Оранжевый - orange.css
- Желтый - желтый .css
- Pink - pink.css
- Фиолетовый - purple.css
Скопируйте /skins/minimal/folder и файл icheck.js на ваш сайт.

Вставьте перед этим в ваш HTML (замените ваш путь и цветовую схему):

<link href="your-path/minimal/color-scheme.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

Пример для красной цветовой схемы:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

Добавьте несколько флажков и переключателей в ваш HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Добавьте JavaScript в ваш HTML, чтобы запустить плагин iCheck:

<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
        increaseArea: '20%' // Optional
      });
   });
</script>

Для отличных от черного цветовых схем используйте этот код (пример для красного):

<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red',
        increaseArea: '20%' // Optional
      });
   });
</script>

Готово

Ответ 30

Быстрое исправление, чтобы добавить значок перед текстом:

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

Ответ 1

Ответ 2

Ответ 3

Ответ 4

Прежде чем начать (по состоянию на январь 2015 года)

Решение (в принципе)

Решение (в коде)

Ответ 5

Не скрывайте его, используя visibility: hidden или display: none

Демо Фиддл

Ответ 6

Ответ 7

Простое в реализации и легко настраиваемое решение

Ответ 8

Ответ 9

Ответ 10

Ответ 11

Мое решение

Ответ 12

Ответ 13

Ответ 14

Ответ 15

Ответ 16

Обновить

Обновление 2

Старый, плохо разработанный код

Ответ 17

Ответ 18

Ответ 19

HTML

CSS

Ответ 20

Ответ 21

Ответ 22

Ответ 23

Ответ 24

Ответ 25

Ответ 26

Ответ 27

Ответ 28

Ответ 29

Ответ 30

Не скрывайте его, используя `visibility: hidden` или `display: none`