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

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

Но стиль не применяется. Флажок по-прежнему отображает стиль по умолчанию. Как мне придать ему указанный стиль?

ОБНОВИТЬ:

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

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

• Создание пользовательских флажков формы с помощью просто CSS
• Easy CSS Checkbox Generator
• Вещи, которые вы можете сделать с помощью галочки
• Реализация пользовательских флажков и радиокнопок с CSS3
• Как оформить флажок с помощью CSS

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

СТАРЫЙ ОТВЕТ

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

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

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

Есть способ сделать это, используя только 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>

Вы можете достичь довольно прохладной пользовательского флажок эффекта, используя новые возможности , которые приходят с :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>

Бонусная скрипка Flipwitch в стиле Webkit

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

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

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

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

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

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

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

2. Со скрытым элементом управления вам все равно нужно будет иметь возможность обнаруживать и переключать его проверенное состояние

3. Проверенное состояние флажка должно быть отражено с помощью стилизации нового элемента.

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

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

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

2. Скрыть свой флажок

3. Добавьте новый элемент после флажка, который вы будете соответствующим образом стилизовать. Он должен появиться после флажка, поэтому его можно выбрать с помощью 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>

Уточнение (с помощью значков)

Но эй! Я слышу, как ты кричишь. А что, если я хочу показать симпатичную галочку или крестик в коробке? И я не хочу использовать фоновые изображения!

Ну, вот где псевдоэлементы CSS3 могут вступить в игру. Они поддерживают contentсвойство, которое позволяет вводить значки Unicode, представляющие любое состояние. В качестве альтернативы, вы можете использовать сторонний источник значков шрифтов, такой как font 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>

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

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

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

Не скрывайте это с помощью visibility: hiddenилиdisplay: none

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

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

1. Скрыть флажки

   input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     z-index: -1;
   }

   Я использую только негатив, z-indexтак как мой пример использует достаточно большую обложку флажка, чтобы полностью покрыть его. Я не рекомендую, left: -999pxтак как он не может быть повторно использован в каждом макете. Ответ Бушана Вагха обеспечивает пуленепробиваемый способ скрыть это и убедить браузер использовать tabindex, так что это хорошая альтернатива. Во всяком случае, оба это просто взломать. Правильный путь сегодня appearance: none, см . Ответ Джоста :

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

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

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

3. Добавить скин флажка

   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 это шрифт Awesome's square-o , отступы настраиваются так, чтобы обеспечить четкий контур на фокусе (см. ниже).

4. Добавить флажок отмеченный скин

   input[type="checkbox"]:checked + span:before {
     content: '\00f046';
   }

   \00f046это Font Awesome's check-square-o, ширина которого не равнаsquare-o , что является причиной стиля ширины, указанного выше.

5. Добавить контур фокуса

   input[type="checkbox"]:focus + span:before {
     outline: 1px dotted #aaa;
   }

   Safari не предоставляет эту функцию (см. Комментарий @Jason Sankey), вы должны использовать window.navigator чтобы обнаружить браузер и пропустить его, если это Safari.

6. Установить серый цвет для отключенного флажка

   input[type="checkbox"]:disabled + span {
     color: #999;
   }

7. Установить тень при наведении на флажок без отключения

   input[type="checkbox"]:not(:disabled) + span:hover:before {
     text-shadow: 0 1px 2px #77F;
   }

Демо Фиддл

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

Вы можете стилизовать флажки с небольшой хитростью, используя 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>

И FIDDLE для приведенного выше кода. Обратите внимание, что некоторые CSS не работают в старых версиях браузеров, но я уверен, что есть несколько интересных примеров JavaScript!

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

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

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

Просто поместите текущий 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;
}

Вы можете избежать добавления дополнительной разметки. Это работает везде, кроме 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" />

Я предпочитаю использовать иконки шрифтов (например, 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>

Вот JSFiddle для этого.

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

Вы можете использовать, 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">

К сожалению, поддержка браузера довольно плохая для этой appearanceопции. Из моего личного тестирования у меня только Opera и Chrome работают правильно. Но это был бы способ сохранить простоту, когда приходит лучшая поддержка или вы хотите использовать только Chrome / Opera.

"Могу ли я использовать?" ссылка на сайт

С чистым 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>

Мое решение

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>

Вы можете просто использовать 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;
}

Хотите НЕТ JavaScript, НЕТ внешних библиотек, соответствия доступности, а также флажков и радиокнопок?

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

Скрипки :

• Флажки - чистый CSS - бесплатно от сторонних библиотек
• Радио кнопки - чистый CSS - без сторонних библиотек
• Флажки *, которые используют FontAwesome, но могут быть легко заменены на глифы и т. Д.

Поздно к вечеринке, но каким-то образом это все еще сложно в 2019–2020 годах, поэтому я добавил свои три решения, которые доступны и легко доступны .

Все это JavaScript бесплатно , внешняя библиотека бесплатно * , и доступ к ...

Если вы хотите подключиться к любому из них, просто скопируйте таблицу стилей из скрипок, отредактируйте цветовые коды в CSS, чтобы они соответствовали вашим потребностям, и вы уже в пути. Вы можете добавить собственный значок галочки svg, если вы хотите для флажков. Я добавил много комментариев для тех, кто не из CSS'ы.

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

Более подробное объяснение: мне нужно решение, которое не нарушает WCAG, не зависит от JavaScript или внешних библиотек, и которое не нарушает навигацию клавиатуры, такую ​​как вкладки или пробел, чтобы выбрать, которое позволяет фокусировать события, решение, которое позволяет отключить флажки, которые оба проверены и бесконтрольно, и , наконец, решение , в котором я могу настроить внешний вид флажка , однако я хочу с различными background-color«s, border-radius, svgфоны и т.д.

Я использовал комбинацию этого ответа от @Jan Turoň, чтобы придумать собственное решение, которое, кажется, работает очень хорошо. Я сделал скриптовую кнопку с переключателями, которая использует много одинакового кода из флажков, чтобы сделать эту работу также с переключателями.

Я все еще изучаю доступность, поэтому, если я что-то пропустил, пожалуйста, оставьте комментарий, и я постараюсь исправить это, вот пример кода моих флажков:

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>

Вот простое решение 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;
}

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

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>

Измените стиль флажка с простым 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>

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

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>

https://jsfiddle.net/rvgccn5b/

Я думаю, что самый простой способ сделать это, стилизовать 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чтобы проверить с помощью JavaScript , потому что я не думаю , что старые версии Internet Explorer понять ::checkedна checkbox.

Хлоп! Все эти обходные пути привели меня к выводу, что флажок 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.

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

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

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>

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

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

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;
}

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

Вот ссылка JsFiddle

Вот версия для 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 .

**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's 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;
    }

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);
}