with - th title html




Como estilizar uma caixa de seleção usando CSS? (18)

Eu estou tentando estilo 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 faço para dar o estilo especificado?


Não é necessário JavaScript ou Jquery .

Altere a maneira simples do seu checkbox.

HTML

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

CSS

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

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

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

Aqui está o link Jsfiddle: https://jsfiddle.net/05y2bge3/


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

Depois de muita pesquisa e teste, obtive esta solução que é simples de implementar e mais fácil de personalizar. Nesta solução :

  1. Você não precisa de bibliotecas externas e arquivos
  2. Você não precisa adicionar HTML extra na sua página
  3. Você não precisa alterar os nomes e o id da caixa de seleção

Simples coloque o CSS fluindo no topo da sua página e todos os checkboxes mudam 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;
}

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>


ATUALIZAÇÃO: A resposta abaixo faz referência ao estado das coisas antes da ampla disponibilidade do CSS3. Nos navegadores modernos (incluindo o Internet Explorer 9 e versões posteriores), é mais simples criar substitutos de caixa de seleção com seu estilo preferido, sem usar o javascript.

Aqui estão alguns links úteis:

Vale a pena notar que a questão fundamental não mudou. Você ainda não pode aplicar estilos (bordas, etc.) diretamente ao elemento checkbox e fazer com que esses estilos afetem 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 de estilo próprio, usando nada além de CSS. Em particular, como o CSS agora tem um seletor :checked amplamente aceito, você pode fazer com que o seu substituto reflita corretamente o status verificado da caixa.

RESPOSTA MAIS ANTIGA

Aqui está um artigo útil sobre como marcar caixas de seleção . Basicamente, o que esse escritor descobriu foi que isso 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. Então, não há um caminho fácil.

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

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


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

Como um aviso prévio, isso não é uma implementação de CSS. Eu só pensei em compartilhar a solução que eu criei no caso de alguém achar útil.

Eu usei o elemento de canvas HTML5.

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

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

Atualizar

Achei o código antigo bem feio, então decidi reescrever.

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 criar 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 me livrei do loop.

Atualização 2

Algo que deixei de mencionar na última atualização é que usar a tela tem mais vantagens do que apenas criar uma caixa de seleção que pareça desejada. Você também pode criar caixas de seleção de vários estados , se quiser.

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

Eu modifiquei ligeiramente o Checkboxusado no último trecho para que ele seja mais genérico, tornando possível "estendê-lo" com uma caixa de seleção que possui 3 estados. Aqui está uma demo . Como você pode ver, ele já tem mais funcionalidade do que a caixa de seleção interna.

Algo a considerar quando você está escolhendo 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;
}

Isto é onde você pode ter problemas no IE, devido ao seu modelo de manipulação de eventos estranho em javascript.

Espero que isso ajude alguém, definitivamente satisfaz minhas necessidades.


Este é um post bastante antigo, mas recentemente encontrei uma solução bastante interessante para o problema.

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

Exemplo de violino

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 é muito ruim para a opção de appearance dos meus testes pessoais. Eu só tenho Opera e Chrome funcionando corretamente. Mas este seria o caminho a percorrer para simplificar a apresentação de um suporte melhor ou apenas usar o Chrome / Opera.

"Eu posso usar?" ligação


Eu seguiria o conselho da resposta do SW4 - para ocultar a caixa de seleção e cobri-la com intervalo personalizado, sugerindo esse código HTML

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

O wrap in label habilmente permite clicar no texto sem a necessidade de vinculação de atributo "for-id". Contudo,

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

Ele funciona clicando ou tocando, mas é uma maneira ruim de usar caixas de seleção. Algumas pessoas ainda usam uma guia muito mais eficiente para mover o foco, o espaço para ativar e a ocultação com esse método a desativa. Se o formulário for longo, você salvará os pulsos de alguém para usar os atributos tabindex ou accesskey . E se você observar o comportamento da caixa de seleção do sistema, haverá uma sombra decente no foco. A caixa de seleção bem estilizada deve seguir esse comportamento.

A resposta de 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 de CSS:

  1. Ocultar caixas de seleção

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

    Eu uso apenas z-index negativo z-index já que meu exemplo usa uma skin de caixa de seleção grande o suficiente para cobrir completamente. Eu não recomendo a left: -999px uma vez que não é reutilizável em todos os layouts. A resposta de Bushan Wagh fornece uma maneira à prova de balas para escondê-lo e convencer o navegador a usar o tabindex, por isso é uma boa alternativa. De qualquer forma, ambos são apenas um hack. A maneira correta hoje é a 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 de estilo

    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }
  3. Adicionar 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 square-o Font Awesome, square-o preenchimento é ajustado para fornecer contorno pontilhado mesmo em foco (veja abaixo).

  4. Adicionar pele marcada na caixa de seleção

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

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

  5. Adicionar contorno de foco

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

    O Safari não oferece esse recurso (veja o comentário do @Jason Sankey), você deve usar o window.navigator para detectar o navegador e ignorá-lo se for o Safari.

  6. Definir cor cinza para a caixa de seleção desativada

    input[type="checkbox"]:disabled + span {
      color: #999;
    }
  7. Defina a sombra do hover 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 a guia e a guia shift + para mover e o espaço para alternar.


Existe uma maneira de fazer isso usando apenas CSS. Podemos (ab) usar o elemento label e estilizá-lo. A ressalva é que isso não funcionará para o IE8 e versões inferiores.

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>

Você pode evitar adicionar marcação extra. Isso funciona em todos os lugares, exceto o IE for Desktop (mas funciona no IE para Windows Phone e Microsoft Edge) por meio da configuração da appearance CSS:

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


Você pode obter um efeito de caixa de seleção personalizado usando as novas habilidades que vêm com as classes :after e :before pseudo. 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 alguns navegadores não permitirem que você defina :after e :before nos elementos de entrada. O que infelizmente significa que, no momento, apenas os navegadores webkit são suportados. FF + IE ainda permitirá que as caixas de seleção funcionem, apenas unstyled, e isso mudará no futuro (o código não usa prefixos de fornecedor).

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

Veja um exemplo de 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>

Bonus Webkit estilo flipswitch 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>


Aqui está uma versão somente CSS / HTML, sem Jquery ou Javascript necessário em tudo, simples e limpo html 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 poder ter rádio individual ou caixas de seleção, grupos de caixas de seleção e grupos de botões de rádio também.

Este html / css, permitirá que você capture também 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 problema algum. Foram testados usando php, aspx, javafaces e coldfusion também.


Essa é a maneira mais simples e você pode escolher quais caixas de seleção devem fornecer 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>

Parece que você pode alterar a cor da caixa de seleção em escala de cinza usando apenas CSS.

O seguinte converte as caixas de seleção de preto para cinza (que era sobre o que eu queria):

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

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/


Como navegadores como edge e firefox não suportam: before: depois de tags de entrada na caixa de seleção, aqui está uma alternativa puramente com html e css. Claro que você deve editar css de acordo com suas necessidades.

Faça o html para checkbox assim:

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

Aplique este estilo para a caixa de seleção para alterar o rótulo da cor

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

Do meu googling, esta é a maneira mais fácil para o estilo de caixa de seleção. Apenas adicione: after e: checked: após o css baseado 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>


Não, você ainda não pode estilizar a caixa de seleção, mas eu (finalmente) descobri como estilizar uma ilusão, mantendo a funcionalidade de clicar em uma caixa de seleção. Isso significa que você pode alterná-lo mesmo se o cursor não estiver perfeitamente imóvel sem arriscar a seleção de texto ou o acionamento de arrastar e soltar!

Esta solução provavelmente também combina botões de rádio.

O seguinte funciona no IE9, FF30.0 e Chrome 40.0.2214.91 e é apenas um exemplo básico. Você ainda pode usá-lo em combinação com imagens de fundo e pseudo-elementos.

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

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

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

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

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

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

Você pode usar o iCheck , caixas de seleção personalizadas e botões de opção para jQuery & Zepto, talvez ele ajude você

Certifique-se de que o jQuery v1.7 + esteja carregado antes do icheck.js

  1. Escolha um esquema de cores, existem 10 estilos diferentes disponíveis:
    • Preto - minimal.css
    • Vermelho - red.css
    • Green - green.css
    • Azul - blue.css
    • Aero - aero.css
    • Cinza - grey.css
    • Laranja - laranja.css
    • Amarelo - amarelo
    • Rosa - pink.css
    • Roxo - roxo.css
  2. Copie / skins / minimal / folder e o arquivo icheck.js para o seu site.
  3. Inserir antes no seu HTML (substitua seu caminho e esquema de cores):

Exemplo para um esquema de cores vermelho:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>
  1. Adicione algumas caixas de seleção e botões de opção ao seu HTML:

  2. Adicione JavaScript ao seu HTML para iniciar o plugin iCheck:

    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal',
            radioClass: 'iradio_minimal',
            increaseArea: '20%' // optional
          });
       });
    </script>
  3. Para diferentes esquemas de cores pretas, use este código (exemplo para Red):

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





checkbox