Estou tentando estilizar uma caixa de seleção usando o seguinte:

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

Mas o estilo não é aplicado. A caixa de seleção ainda exibe seu estilo padrão. Como atribuo o estilo especificado?

ATUALIZAR:

A resposta abaixo faz referência ao estado anterior à ampla disponibilidade do CSS 3. Nos navegadores modernos (incluindo o Internet Explorer 9 e posterior), é mais simples criar substituições de caixas de seleção com seu estilo preferido, sem usar JavaScript.

Aqui estão alguns links úteis:

• Criando caixas de seleção de formulários personalizados com apenas CSS
• Fácil CSS Checkbox Generator
• Coisas que você pode fazer com o corte da caixa de seleção
• Implementando caixas de seleção personalizadas e botões de opção com CSS3
• Como estilizar uma caixa de seleção com CSS

Vale ressaltar que a questão fundamental não mudou. Você ainda não pode aplicar estilos (bordas, etc.) diretamente ao elemento da caixa de seleção e esses estilos afetam a exibição da caixa de seleção HTML. O que mudou, no entanto, é que agora é possível ocultar a caixa de seleção real e substituí-la por um elemento com estilo próprio, usando nada além de CSS. Em particular, como o CSS agora possui um :checkedseletor amplamente suportado , você pode fazer a sua substituição refletir corretamente o status verificado da caixa.

RESPOSTA ANTIGA

Aqui está um artigo útil sobre caixas de seleção de estilo . Basicamente, esse escritor descobriu que ela varia enormemente de navegador para navegador, e que muitos navegadores sempre exibem a caixa de seleção padrão, não importa como você a estilize. Portanto, não há realmente uma maneira fácil.

Não é difícil imaginar uma solução alternativa em que você usaria o JavaScript para sobrepor uma imagem na caixa de seleção e ter cliques nessa imagem para fazer com que a caixa de seleção real seja marcada. Usuários sem JavaScript veriam a caixa de seleção padrão.

Editado para adicionar: aqui está um bom script que faz isso por você ; oculta o elemento real da caixa de seleção, substitui-o por uma extensão estilizada e redireciona os eventos de clique.

Existe uma maneira de fazer isso usando apenas CSS. Podemos (ab) usar o labelelemento e estilizar esse elemento. A ressalva é que isso não funcionará para o Internet Explorer 8 e versões inferiores.

.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>

Você pode obter um efeito de caixa de seleção personalizado bastante bacana usando as novas habilidades que acompanham as classes :aftere :beforepseudo. A vantagem disso é: você não precisa adicionar mais nada ao DOM, apenas a caixa de seleção padrão.

Observe que isso funcionará apenas para navegadores compatíveis. Acredito que isso esteja relacionado ao fato de que alguns navegadores não permitem definir :aftere :beforeinserir elementos de entrada. Infelizmente, no momento, apenas os navegadores WebKit são suportados. O Firefox + Internet Explorer ainda permitirá que as caixas de seleção funcionem, sem estilo, e isso provavelmente mudará no futuro (o código não usa prefixos de fornecedor).

Esta é apenas uma solução de navegador WebKit (navegadores Chrome, Safari, Mobile)

Veja o exemplo Violino

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

Violão de flipswitch estilo Webkit bônus

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

Antes de começar (em janeiro de 2015)

A pergunta e resposta originais agora têm ~ 5 anos. Como tal, isso é um pouco de atualização.

Em primeiro lugar, existem várias abordagens quando se trata de caixas de seleção de estilo. o princípio básico é:

1. Você precisará ocultar o controle da caixa de seleção padrão, estilizado pelo seu navegador, e não pode ser substituído de maneira significativa usando CSS.

2. Com o controle oculto, você ainda precisará detectar e alternar seu estado verificado

3. O estado marcado da caixa de seleção precisará ser refletido com o estilo de um novo elemento

A solução (em princípio)

O que foi dito acima pode ser realizado de várias maneiras - e você freqüentemente ouvirá que usar pseudoelementos CSS3 é o caminho certo. Na verdade, não existe um caminho real certo ou errado, depende da abordagem mais adequada ao contexto em que você o usará. Dito isso, eu tenho um preferido.

1. Quebra sua caixa de seleção em um labelelemento. Isso significa que, mesmo quando está oculto, você ainda pode alternar seu estado verificado ao clicar em qualquer lugar do rótulo.

2. Ocultar sua caixa de seleção

3. Adicione um novo elemento após a caixa de seleção que você estilizará de acordo. Ele deve aparecer após a caixa de seleção para poder ser selecionado usando CSS e com estilo dependendo do :checkedestado. O CSS não pode selecionar 'para trás'.

A solução (no código)

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>

Refinamento (usando ícones)

Mas ei! Eu ouço você gritar. E se eu quiser mostrar um belo carrapato ou cruz na caixa? E não quero usar imagens de fundo!

Bem, é aqui que os pseudoelementos do CSS3 podem entrar em jogo. Eles suportam a contentpropriedade que permite injetar ícones Unicode representando ambos os estados. Como alternativa, você pode usar uma fonte de ícone de fonte de terceiros, como a fonte awesome (embora certifique-se de definir também o relevante font-family, por exemplo, para 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>

Eu seguiria o conselho da resposta do SW4 - para ocultar a caixa de seleção e cobri-la com uma extensão personalizada, sugerindo este HTML:

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

A etiqueta de quebra automática permite clicar no texto sem a necessidade de vincular o atributo "for-id". Contudo,

Não esconda usando visibility: hiddenoudisplay: none

Funciona clicando ou tocando, mas é uma maneira esfarrapada de usar caixas de seleção. Algumas pessoas ainda usam muito mais eficaz Tabpara mover o foco, Spaceativar e se esconder com esse método o desabilita. Se o formulário for longo, um salvará os pulsos de alguém para uso tabindexou accesskeyatributos. E se você observar o comportamento da caixa de seleção do sistema, haverá uma sombra decente ao passar o mouse. A caixa de seleção bem estilizada deve seguir esse comportamento.

A resposta da cobberboy recomenda Font Awesome, que geralmente é melhor que bitmap, pois as fontes são vetores escalonáveis. Trabalhando com o HTML acima, sugiro estas regras CSS:

1. Ocultar caixas de seleção

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

   Uso apenas negativo, z-indexpois meu exemplo usa uma caixa de seleção grande o suficiente para cobri-la completamente. Eu não recomendo, left: -999pxpois não é reutilizável em todos os layouts. A resposta de Bushan wagh fornece uma maneira à prova de balas para ocultá-lo e convencer o navegador a usar tabindex, por isso é uma boa alternativa. Enfim, ambos são apenas um hack. A maneira correta hoje é appearance: none, veja a resposta de Joost :

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

2. Rótulo da caixa de seleção Estilo

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

3. Adicionar skin da caixa de seleção

   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é o Font Awesome square-o, o preenchimento é ajustado para fornecer um contorno pontilhado no foco (veja abaixo).

4. Adicionar skin marcado na caixa de seleção

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

   \00f046é o Font Awesome check-square-o, que não tem a mesma largura que square-o, e é o motivo do estilo de largura acima.

5. Adicionar esboço de foco

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

   O Safari não fornece esse recurso (consulte o comentário de @Jason Sankey), você deve window.navigatordetectar o navegador e ignorá-lo, se for o Safari.

6. Caixa de seleção Definir cor cinza para desativado

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

7. Defina sombra suspensa na caixa de seleção não desativada

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

Demo Fiddle

Tente passar o mouse sobre as caixas de seleção e use Tabe Shift+ Tabpara mover e Spacealternar.

Você pode estilizar caixas de seleção com um pouco de truque usando o labelelemento abaixo:

.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>

E um FIDDLE para o código acima. Observe que alguns CSS não funcionam em versões mais antigas de navegadores, mas tenho certeza de que existem alguns exemplos de JavaScript sofisticados por aí!

Solução simples de implementar e facilmente personalizável

Depois de muitas pesquisas e testes, obtive esta solução que é simples de implementar e mais fácil de personalizar. Nesta solução :

1. Você não precisa de bibliotecas e arquivos externos
2. Você não precisa adicionar HTML extra em sua página
3. Você não precisa alterar o nome e o ID da caixa de seleção

Simplesmente coloque o CSS corrido no topo da sua página e todo o estilo das caixas de seleção mudará assim:

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

Você pode evitar adicionar marcações extras. Isso funciona em qualquer lugar, exceto no IE for Desktop (mas funciona no IE para Windows Phone e Microsoft Edge) através da configuração de 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" />

Prefiro usar fontes de ícone (como FontAwesome), pois é fácil modificar suas cores com CSS, e elas são muito bem dimensionadas em dispositivos de alta densidade de pixels. Então, aqui está outra variante CSS pura, usando técnicas semelhantes às acima.

(Abaixo está uma imagem estática para que você possa visualizar o resultado; consulte o JSFiddle para obter uma versão interativa.)

Como em outras soluções, ele usa o labelelemento Um adjacente spancontém nosso caractere de caixa de seleção.

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>

Aqui está o JSFiddle para isso.

Recentemente eu encontrei uma solução bastante interessante para o problema.

Você pode usar appearance: none;para desativar o estilo padrão da caixa de seleção e depois escrever seu próprio estilo, como descrito aqui (Exemplo 4) .

Violino de exemplo

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">

Infelizmente, o suporte ao navegador é bastante ruim para a appearanceopção. Nos meus testes pessoais, apenas consegui o Opera e o Chrome funcionando corretamente. Mas esse seria o caminho a seguir para simplificá-lo quando houver melhor suporte ou você desejar apenas usar o Chrome / Opera.

"Eu posso usar?" ligação

Com CSS puro, nada sofisticado :beforee :aftersem transformações, você pode desativar a aparência padrão e depois estilizá-la com uma imagem de plano de fundo embutida, como no exemplo a seguir. Isso funciona no Chrome, Firefox, Safari e agora 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>

Minha solução

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>

Você pode simplesmente usar appearance: noneem navegadores modernos, para que não haja estilo padrão e todos os seus estilos sejam aplicados corretamente:

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

Deseja JavaScript, bibliotecas externas, conformidade com acessibilidade e caixas de seleção e botões de opção?

Tenho vindo a rolagem e rolagem e toneladas destas respostas simplesmente jogar a acessibilidade fora da porta e violar WCAG em mais de uma maneira. Eu instalei botões de opção, pois na maioria das vezes, quando você usa caixas de seleção personalizadas, também deseja botões de opção.

Fiddles :

• Caixas de seleção - CSS puro - gratuitas em bibliotecas de terceiros
• Botões de opção - CSS puro - gratuitos a partir de bibliotecas de terceiros
• Caixas de seleção * que usam FontAwesome, mas podem ser trocadas com Glyphicons, etc. facilmente

Tarde para a festa, mas de alguma forma isso ainda é difícil em 2019 2020, por isso adicionei minhas três soluções que são acessíveis e fáceis de usar .

Tudo isso é livre de JavaScript , livre de bibliotecas externas * e acessível ...

Se você quiser plug-n-play com qualquer um deles, basta copiar a folha de estilos dos violinos, edite os códigos de cores no CSS para atender às suas necessidades e siga seu caminho. Você pode adicionar um ícone de marca de seleção svg personalizado se desejar para as caixas de seleção. Eu adicionei muitos comentários para aqueles que não são CSS'y.

Se você tiver texto longo ou um contêiner pequeno e encontrar quebra automática de texto embaixo da caixa de seleção ou da entrada do botão de opção, basta converter em divs como este .

Explicação mais longa: eu precisava de uma solução que não viole o WCAG, não confie em JavaScript ou em bibliotecas externas, e que não interrompa a navegação do teclado, como tabulação ou barra de espaço para selecionar, que permita eventos de foco, uma solução que permita caixas de seleção desabilitadas que estão marcadas e desmarcadas e, finalmente, uma solução onde eu posso personalizar a aparência da caixa de seleção no entanto eu quero com diferente background-color's, border-radius, svgfundos, etc.

Usei alguma combinação desta resposta de @Jan Turoň para criar minha própria solução, que parece funcionar muito bem. Eu fiz um violino de botão de opção que usa muito do mesmo código nas caixas de seleção para fazer isso funcionar também com os botões de opção.

Ainda estou aprendendo a acessibilidade, por isso, se eu perdi alguma coisa, envie um comentário e tentarei corrigi-lo. Aqui está um exemplo de código das minhas caixas de seleção:

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>

Aqui está uma solução CSS simples, sem qualquer código jQuery ou JavaScript.

Estou usando ícones FontAwseome, mas você pode usar qualquer imagem

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

No meu blog, essa é a maneira mais fácil de estilizar as caixas de seleção. Basta adicionar :aftere :checked:afterCSS com base no seu design.

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>

Modifique o estilo da caixa de seleção com CSS3 simples, sem necessidade de manipulação de JS e 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>

Um modelo simples e leve também:

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/

Acho que a maneira mais fácil de fazer isso é estilizar labele tornar o checkboxinvisível.

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 */
}

O checkboxmesmo estando oculto, ainda estará acessível e seu valor será enviado quando um formulário for enviado. Para navegadores antigos que você pode ter que mudar a classe do labelque verificado usando JavaScript, porque eu não acho que as versões antigas do Internet Explorer entender ::checkedsobre a checkbox.

Caramba! Todas essas soluções alternativas me levaram à conclusão de que a caixa de seleção HTML é uma porcaria se você quiser estilizá-la.

Como aviso prévio, essa não é uma implementação de CSS. Eu apenas pensei em compartilhar a solução alternativa que encontrei, caso alguém ache útil.

Eu usei o canvaselemento HTML5 .

A vantagem disso é que você não precisa usar imagens externas e provavelmente pode economizar largura de banda.

A desvantagem é que, se por algum motivo um navegador não puder renderizá-lo corretamente, não haverá substituto. Embora seja discutível se isso continua sendo um problema em 2017.

Atualizar

Achei o código antigo muito feio, então decidi reescrevê-lo.

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

Aqui está uma demonstração de trabalho .

A nova versão usa protótipos e herança diferencial para criar um sistema eficiente para a criação de caixas de seleção. Para criar uma caixa de seleção:

var my_checkbox = Checkbox.create();

Isso adicionará imediatamente a caixa de seleção ao DOM e conectará os eventos. Para consultar se uma caixa de seleção está marcada:

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

Também é importante notar que eu me livrei do loop.

Atualização 2

Algo que eu esqueci de mencionar na última atualização é que o uso da tela tem mais vantagens do que apenas fazer uma caixa de seleção com a aparência que você deseja. Você também pode criar caixas de seleção de vários estados , se desejar.

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

Modifiquei um pouco o Checkboxusado no último trecho para torná-lo mais genérico, possibilitando "estendê-lo" com uma caixa de seleção que possui 3 estados. Aqui está uma demonstração . Como você pode ver, ele já possui mais funcionalidades do que a caixa de seleção incorporada.

Algo a considerar ao escolher entre JavaScript e CSS.

Código antigo mal projetado

Demonstração de trabalho

Primeiro, configure uma tela

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

Em seguida, crie uma maneira de atualizar a tela.

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

A última parte é torná-lo interativo. Felizmente, é bem simples:

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

É aqui que você pode ter problemas no IE, devido ao modelo estranho de manipulação de eventos em JavaScript.

Espero que isso ajude alguém; definitivamente atendeu às minhas necessidades.

Essa é a maneira mais simples e você pode escolher quais caixas de seleção dar esse estilo.

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>

Não é necessário JavaScript ou jQuery .

Mude o estilo da caixa de seleção de maneira simples.

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>

Aqui está o link JsFiddle

Aqui está uma versão somente CSS / HTML, sem necessidade de jQuery ou JavaScript, HTML simples e limpo e CSS realmente simples e curto.

Aqui está o JSFiddle

http://jsfiddle.net/v71kn3pr/

Aqui está o 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>

Aqui está o 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;
}

Isso pode ser adaptado para ter caixas de seleção ou opção de rádio, grupos de caixas de seleção e grupos de botões de opção.

Esse html / css permitirá que você capture também o clique no rótulo, para que a caixa de seleção seja marcada e desmarcada, mesmo se você clicar apenas no rótulo.

Este tipo de caixa de seleção / botão de opção funciona perfeitamente com qualquer forma, sem nenhum problema. Também foram testados usando PHP, ASP.NET (.aspx), JavaServer Faces e 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);
}