Personalizando campos de seleção (checkbox, radio) com CSS
CSS - Personalizar campos de seleção Checkbox, Radio com CSSPersonalizando 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
- 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
Criação e Diagramação
