WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Personalizando campos de seleção (checkbox, radio) com CSS

Publicidade

Personalizando campos de seleção (checkbox, radio) com CSS e sem Javascript

Hoje mostraremos alguns exemplos de como personalizar campos checkbox e radio button.

​O Código HTML

Vamos começar criando um código HTML básico para os botões que iremos utilizar de exemplo em ambos os métodos.
<div class="exemplo-radio">    <input type="radio" value="0" name="campo-radio" id="campo-radio1" />    <label for="campo-radio1">Opção</label>    <input type="radio" value="0" name="campo-radio" id="campo-radio2" />    <label for="campo-radio2">Opção</label></div><div class="exemplo-checkbox">    <input type="checkbox" value="0" name="campo-checkbox" id="campo-checkbox1" />    <label for="campo-checkbox1">Opção</label>    <input type="checkbox" value="0" name="campo-checkbox" id="campo-checkbox" />    <label for="campo-checkbox">Opção</label></div>

Primeiro Método: Label

Como os inputs radio e checkox não podem ser alterados através do CSS, nesse método nos iremos esconder esses inputs e utilizar o próprio label de cada um deles para fazer a personalização. Como o label é interpretado como uma parte do campo, ele substituirá o input sem problema.

.exemplo1 input[type=radio], .exemplo1 input[type=checkbox]{    display:none; /* Esconde os inputs */}.exemplo1 input[type=radio] + label, .exemplo1 input[type=checkbox] + label{    display:inline-block;    height:20px;    padding:0 0 0 25px;    margin:0 10px 0 0;    background-image:url(http://www.webcis.com.br/images/imagens-noticias/checkbox/ico-master.png);    background-repeat:no-repeat;    background-position:0 0;}.exemplo1 input[type=checkbox] + label{    background-position:0 -60px; /* Muda a posição do background só no checkbox */}.exemplo1 input[type=radio]:checked + label{    background-position:0 -30px;}.exemplo1 input[type=checkbox]:checked + label {    background-position:0 -90px;}

Resultado

PRÓS:
- Por não utilizar elementos extras, funciona na maior parte das versões dos navegadores.
- Código simples;

CONTRAS:
- A necessidade da utilização de imagens de background, pois qualquer alteração no label afeta o texto da opção;
- Não funciona em versões anteriores ao Internet Explorer 9 (sem suporte ao comando :checked);

Segundo Método: pseudo-elementos AFTER e BEFORE

Este método se diferencia do anterior pelo uso dos pseudo-elementos after e before, permitindo personalizações mais detalhadas e sem a necessidade de alterações no label.
.exemplo2 input[type=radio], .exemplo2 input[type=checkbox]{    display:none; /* Esconde os inputs */}.exemplo2 label {    cursor: pointer;}.exemplo2 input[type="radio"] + label:before, .exemplo2 input[type="checkbox"] + label:before {    border: 1px solid #5D5C5C;    content: "\00a0";    display: inline-block;    font: 16px/1em sans-serif;    height: 16px;    margin: 0 .25em 0 0;    padding:0;    vertical-align: top;    width: 16px;    border-radius:4px;}.exemplo2 input[type="radio"]:checked + label:before, .exemplo2 input[type="checkbox"]:checked + label:before {    background: #A0A0A0;    color: #FFF;    content: "\2713";    text-align: center;}.exemplo2 input[type=radio"]:checked + label:after, .exemplo2 input[type="checkbox"]:checked + label:after {    font-weight: bold;}

Resultado

PRÓS:
- Por não alterar o label dos campos, permite uma maior gama de estilizações dos textos.
- Contrário ao método anterior, não é necessária a utilização de imagens como background, os estilos podem ser aplicados aos pseudo-elementos;
- Maiores opções de personalização;

CONTRAS:
- Não funciona em versões anteriores ao Internet Explorer 9 (sem suporte ao comando :checked);

Outros Exemplos

Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]