Dica Rápida: Caixas de Seleção e Botões de Rádio Fáceis com CSS3

() translation by (you can also view the original English article)

Já se perguntou como estilizar caixas de seleção e botões de rádio sem JavaScript? Graças ao CSS3, é possível! Eis o que criaremos:

Se estiver buscando alguns gráficos para usar com os elementos de UI do formulário, veja os kits de UI disponíveis na Envato Elements. Caso contrário, peguemos um café e comecemos o tutorial.

1. Entendendo o Processo

Leitura Recomendada: Os 30 Seletores CSS Que Você Deve Memorizar

Para aqueles confiantes nas habilidades CSS e só precisa da direção correta, eis a linha de CSs mais importante de todo o tutorial:

1	input[type="checkbox"]:checked + label {
2
3	}

Agora, para aqueles que precisam de mais ajuda, sigam em frente!

Certo, de volta ao tópico. O que exatamente faremos? Bem, pelo pseudo seletor :checked do CSS3, somos capazes de mirar um elemento baseado em sua posição de marcado (ou não) Podemos, então, usar o seletor de irmão adjacente, +, do CSS2.1 para mirar o elemento diretamente após a caixa de seleção ou rádio, que aqui será um label.

2. Preparando Nosso HTML

Agora, começamos criando nosso HTML e CSS (ou o que preferirmos usar para os estilos). Assumiremos que todos sobemos o que fazer para não atrasarmos.

Para poder guiar pela resposta correta, apenas mostraremos essa técnica na caixa de seleção, mas o processo para os botões de rádio é idêntico e está incluso no código fonte.

Certo, podemos começar? Então criemos nossa caixa de seleção, seguida de um label.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Agora, caso não saiba muito sobre o elemento <label>, devemos conectá-lo a um input para podermos interagir com o último através do primeiro. Isso é feito usando for="" com o ID do campo de entrada.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Também adicionaremos um <span> dentro da label, que é uma preferência nossa, mas fará mais sentido no passo 3.

3. O Que Queremos: CSS

Aqui a diversão começa. Primeira coisa a fazer, que é a base de todo o tutorial, é esconder a caixa de seleção verdadeira.

1	input[type="checkbox"] {
2	display:none;
3	}

Uma vez feito, podemos estilizar a label, em específico o span dentro dela. Fazemos isso para ter mais controle sobre a posição exata da caixa de seleção. Sem ele, teríamos de usar imagens de plano de fundo diretamente na label e seu posicionamento é difícil.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Muito bem, expliquemos rápido. Primeiro, notemos o plano de fundo. Temos uma pequena folha de sprite, assim o que configuraremos a posição do plano de fundo no span. O span em si é da largura e altura exata de cada "sprite" na folha, facilitando a definição de cada estado.

Our sprite sheet — Nossa folhas de sprite

Eis o resto do CSS, específico para nosso estilo. É só estética, para nosso gosto e design.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Fazendo Funcionar

Não tem muito mais o que fazer, então terminemos. A última coisa que faremos é prover um estado para o elemento quando o campo estiver selecionado e, opcionalmente, quando com o mouse posicionado sobre. É bem simples, vejamos.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Como usamos a folha de sprite, so precisamos mudar a posição do plano de fundo. Notemos que, para estilizar o span quando a caixa de seleção/botão de rádio está selecionada bastou usar :checked da CSS3.

Nota Rápida Sobre Suporte dos Navegadores

Pseudos Seletores tem grande suporte pelos navegadores, mas problemas podem ocorrer. Felizmente a alternativa é graciosa:

Can I use data for pseudo selectors — Dados do Can I Use para pseudo seletores no geral

IE9 on Windows 7 — Alternativa: IE9 no Windows 7.

Navegadores móveis antigos também causam problems - suporte a :checked é confuso. Safari Mobile antes do iOS 6 não suporta, por exemplo.

Conclusão

Certo, terminamos, não é? Chequemos tudo. Primeiro o HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Parece o mesmo? Não esqueçamos da <span>! Ao experimentar por conta própria, recomendamos tentar novas e diferentes maneiras para essa parte. Adoraríamos ver o que vocês conseguiram fazer e se foi mais eficiente. Agora o CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Tudo presente? Perfeito. Lembremo-nos que muitos desses estilos são específico ao estilo criado para a demo. Encorajamos a criarem seus próprios e a experimentarem com o posicionamento e apresentação.

Concluindo, a coisa mais importante a levar consigo é a primeira linha de CSS que escrevemos bem no começo:

1	input[type="checkbox"]:checked + label {
2
3	}

Usando isso, podemos criar várias coisas diferentes. As possibilidade com :checked vão além das caixas de seleção e rádios de formulários. Mas, a parte da descoberta é por conta de vocês. Eis algo a se experiementar:

Adicionemos folhas de sprite "2x" para telas retina
Usar SVG ao invés de mapas de bit

Esperamos que tenham curtido esse pequeno tutorial e que o que viram aqui sirva muito e que possam aprimorá-lo!