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]