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

CSS:

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    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");
}

HTML:

<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 браузеры поддерживаются. FF + IE по-прежнему позволит флажкам функционировать, просто неустановленным, и это, надеюсь, изменится в будущем (код не использует префиксы поставщиков).

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

См. Пример Скрипку

$(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>

Бонусный стиль webkit flipswitch скрипка

$(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. вам нужно будет скрыть элемент управления checkbox по умолчанию, который стилизован вашим браузером и не может быть переопределен каким-либо значимым образом с помощью стиль 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 alllow tabbing, which display:none prevents */
  display:block;
  height:0;
  width:0;
  position:absolute;
  overflow:hidden;
}
label span {/* <-- style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

доработка (с помощью значков)

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

Ну, это где псевдо-элементы CSS3 могут вступить в игру. Эти поддерживают content свойство, которое позволяет впрыскивать unicode иконки представляющих государство. Кроме того, вы можете использовать сторонний источник значков шрифтов, такой как 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: '14';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

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

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

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

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

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

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

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

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

1. скрыть чекбоксы

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

   я использую только отрицательный z-index так как мой пример использует достаточно большой флажок кожи, чтобы полностью покрыть его. Я не рекомендую left: -999px поскольку он не используется повторно в каждом макете. Бушан wagh это обеспечивает пуленепробиваемый способ скрыть его и убедить браузер использовать 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. добавить флажок skin

   input[type="checkbox"] + span:before {
     font: 16pt FontAwesome;
     content: 'f096';
     display: inline-block;
     width: 16pt;
     padding: 2px 0 0 3px;
     margin-right: 0.5em;
   }
   

   f096 это шрифт Awesome в square-o, прокладка отрегулирована для того чтобы обеспечить даже пунктирный план на Фокусе (см. ниже).

4. добавить флажок кожа

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

   f046 это шрифт Awesome в 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;
   }
   

demo Fiddle

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

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

input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: 'f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

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

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

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

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

<label><input type="checkbox"><span>send newsletter</span></label><br>
<label><input type="checkbox" checked disabled><span>I doubt it</span></label><br>
<label><input type="checkbox" disabled><span>well I never</span></label><br>
<label><input type="checkbox"><span>I agree with terms of use</span></label><br>
<label><input type="checkbox"><span>check to confirm</span></label>

попробуйте навести курсор мыши на флажки и использовать tab и shift+tab двигаться и пробел для переключения.

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

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

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

просто поместите текущий 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: "14";
  padding: -5px;
  font-weight: bold;
}

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

/*