Como configurar uma opção usando o CSS?

estou a tentar arranjar uma caixa de cheques usando o seguinte: 

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

mas o estilo não é aplicado. A opção ainda mostra o seu estilo predefinido. Como lhe dou o estilo especificado?

Author: Nemus, 0000-00-00
Source

8 answers

Actualizar: A resposta abaixo referencia o estado das coisas antes da disponibilidade generalizada de CSS3. Nos navegadores modernos (incluindo o Internet Explorer 9 e mais tarde) é mais simples criar substituições de checkbox com o seu estilo preferido, sem usar javascript.

Aqui estão algumas ligações úteis:

Vale a pena notar que a questão fundamental não mudou. Você ainda não pode aplicar estilos (fronteiras, etc.) diretamente para o elemento checkbox e ter esses estilos afetam a exibição da checkbox HTML. O que mudou, no entanto, é que agora é possível esconder a caixa de controle real e substituí - lo por um elemento de estilo próprio, usando apenas CSS. Em particular, dado que o CSS tem agora um selector :checked amplamente suportado, poderá fazer com que a sua substituição reflicta correctamente o estado assinalado da caixa.

RESPOSTA MAIS ANTIGA

Aqui está um artigo útil sobre as caixas de cheques de estilo. Basicamente o que esse escritor descobriu foi que varia tremendamente de navegador para navegador, e que muitos navegadores sempre exibem a caixa de seleção padrão, não importa como você o estilo. Então não há realmente uma fácil forma.

Não é difícil imaginar um workaround onde você usaria o javascript para sobrepor uma imagem na opção e ter 'clicks' nessa imagem faz com que a opção real seja assinalada. Os utilizadores sem javascript veriam a opção predefinida.

Editado para adicionar: aqui está um bom programa que faz isto por si {[[9]}; esconde o elemento da caixa de controlo real, substitui-o por um espaço de estilo e redirecciona os Eventos do botão.

 687
Author: Jacob Mattison, 2017-02-06 20:49:26

Há uma maneira de fazer isto usando apenas CSS. Podemos (ab) usar o elemento label e estilo que em vez disso. A ressalva é que isso não vai funcionar para IE8 e versões mais baixas.

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>
 120
Author: Blake Pettersson, 2018-09-24 13:13:57

Você pode obter um efeito de checkbox bastante legal usando as novas habilidades que vêm com as classes :after e :before pseudo. A vantagem disso, é: você não precisa adicionar nada mais ao DOM, apenas a caixa de cheques padrão.

Note que isto só irá funcionar para Navegadores compatíveis, creio que isto está relacionado com o facto de alguns navegadores não lhe permitirem definir :after e :before em elementos de entrada. O que, infelizmente, significa que, por enquanto, apenas navegadores webkit são compativel. FF + IE ainda permitirá que os checkboxes funcionem, apenas instável, e isso irá mudar no futuro (o código não usa prefixos do Fornecedor).

Esta é apenas uma solução de navegador Webkit (Chrome, Safari, navegadores móveis)

Ver Violino De Exemplo 

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

'flipswitch' de estilo Webkit bónus violino

$(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>
 115
Author: Josh Mc, 2018-04-26 14:49:45

Antes de começar (a partir de Janeiro de 2015)

A pergunta original e a resposta têm agora ~5 anos. Como tal, isto é uma pequena actualização.

Em primeiro lugar, há uma série de abordagens quando se trata de styling checkboxes. o princípio básico é:

  1. Terá de esconder o controlo por omissão da opção, que é denominado pelo seu navegador, e não pode ser substituído de forma significativa com o CSS.

  2. Com o controle escondido, você vai ainda precisa de ser capaz de detectar e comutar o seu estado verificado

  3. O estado assinalado da opção terá de ser reflectido ao estilo de um novo elemento

A solução (em princípio)

O acima pode ser realizado por uma série de meios - e você vai ouvir muitas vezes usando pseudo-elementos CSS3 é o caminho certo. Na verdade, não há um caminho certo ou errado, depende da abordagem mais adequada para o contexto em que você vai usá-lo. Dito isto ... , Tenho um preferido.

  1. Embrulhe a sua opção num elemento label. Isto significa que, mesmo quando estiver escondido, Poderá à mesma comutar o seu estado assinalado ao carregar em qualquer lugar dentro da legenda.

  2. Esconder a sua opção

  3. Adicione um novo elemento após a opção que irá usar de acordo com o estilo. Deve aparecer após a opção para que possa ser seleccionado usando CSS e estilo dependente do estado :checked. O CSS não pode seleccionar "para trás".

A solução (em código) 

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>

Refinamento (usando ícones)

Mas, ei! Ouço-te gritar. E se eu quiser mostrar uma carraça ou uma cruz na caixa? E eu não quero usar imagens de fundo! Bem, é aqui que os pseudo-elementos do CSS3 podem entrar em jogo. Estes suportam a propriedade content que lhe permite injectar ícones unicode que representam ambos os Estados. Em alternativa, poderá usar uma fonte de ícones de tipos de letra de terceiros, como o font awesome (embora tenha a certeza de que também definiu o font-family relevante, 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>
 109
Author: SW4, 2018-04-26 14:53:19

Você pode Estilo checkboxes com um pequeno truque usando o elemento label um exemplo está 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 a violino para o código acima. Note que alguns CSS não funcionam em versões mais antigas de navegadores, mas tenho certeza que existem alguns exemplos de JavaScript chiques lá fora!

 27
Author: Jake, 2018-04-26 13:58:49

Eu seguiria o Conselho da resposta do SW4 - para esconder a caixa de cheques e cobri - la com uma escala personalizada, sugerindo este HTML 

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

A mudança de linha na legenda permite carregar no texto sem a necessidade de ligação do atributo" for-id". No entanto,

Não o esconda usando visibility: hidden ou display: none

Funciona clicando ou batendo, mas essa é uma maneira lame de usar checkboxes. Algumas pessoas ainda usam muito mais eficaz tab para mover o foco, Espaço para activar e esconder-se com esse método desactiva-o. Se a forma for longa, salvará os pulsos de alguém para usar atributos tabindex ou accesskey. E se você observar o comportamento do sistema checkbox, há uma sombra decente em hover. A caixa de cheques bem estilizada deve seguir este comportamento.

A resposta de Cobberboy recomenda Font Awesome O que é normalmente melhor do que bitmap, uma vez que os tipos de letra são vectores escaláveis. Trabalhando com o HTML acima, eu sugiro estes CSS regras:

  1. esconder as caixas de cheques

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

    Uso apenas negativo z-index Uma vez que o meu exemplo usa uma caixa de checkbox suficientemente grande para o cobrir completamente. Não recomendo left: -999px uma vez que não é reutilizável em todos os layouts. a resposta de Bushan wagh fornece uma maneira à prova de bala para escondê-la e convencer o navegador a usar tabindex, por isso é uma boa alternativa. De qualquer forma, ambos são apenas uma invasão. A maneira correta de hoje é Joost's resposta:

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

  2. Legenda da opção de estilo

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

  3. adicionar o visual da opçã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 é Font Awese's square-o, o estofamento é ajustado para fornecer um contorno mesmo pontilhado em foco (ver abaixo).

  4. adicionar uma opção Verificar o visual

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

    \00f046 is Font Awese's check-square-o, which is not the same width as square-o, which is the reason for the width style acima.

  5. adicionar um contorno em foco

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

    O Safari não fornece esta funcionalidade (veja o comentário de @Jason Sankey); deverá usar window.navigator para detectar o navegador e ignorá-lo se for o Safari.

  6. mudar a cor cinzenta para a opção desactivada

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

  7. definir a sombra de passagem na opção não-desactivada

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

Demonstração Violino

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: '\00f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

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

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>

Tente passar o rato por cima das Caixas de controlo e use tab e shift+tab para mover e espaço para comutar.

 23
Author: Jan Turoň, 2018-04-26 14:12:45

Simples de implementar e solução facilmente personalizável

Depois de muita pesquisa e testes eu tenho esta solução que é simples de implementar e mais fácil de personalizar. nesta solução:

    Você não precisa de bibliotecas e arquivos externos. Não precisas de adicionar HTML extra na sua página
  1. não é necessário alterar os nomes da opção e id

Simples coloque o CSS fluindo no topo da sua página e todos os estilos de checkboxes irão mudar assim:

enter image description here

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;
}
 19
Author: Mohamed Nor, 2018-04-26 14:20:38

Prefiro usar os tipos de letra dos ícones (como o FontAwesome), uma vez que é fácil modificar as suas cores com o CSS e que têm uma escala muito boa em dispositivos de alta densidade de pixels. Então aqui está outra variante CSS pura, usando técnicas similares às acima.

(Abaixo está uma imagem estática para que possa visualizar o resultado; veja o JSFiddle para uma versão interactiva)

checkbox example

Tal como acontece com outras soluções, utiliza o elemento label. Um span adjacente mantém a nossa caixa de cheques. personagem.

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

/*
 13
Author: ,