Caixa de seleção e entrada de rádio personalizadas com CSS puro e substituto


INTRODUÇÃO: Atualmente, estou trabalhando em uma nova diretriz de estilo e aqui está minha dica profissional para personalizar caixas de seleção e botões de opção com CSS3 puro e um fallback implícito para nativo.

+ Primeiro criamos divs com classes ‘checkbox’ e ‘radio’ assim:

div.checkbox
div
.radio

+ Em seguida, insira os campos de entrada para o tipo de rádio e digite a caixa de seleção como:

div.checkbox>input#chkbx[type=checkbox]+label[for=chkbx]
div
.radio>input#rdo[type=radio]+label[for=rdo]

INFO: Sim, estou usando o Emmet, se você não conhece, deveria dar uma olhada 😉

+ CSS Parte ist a seguir: Vamos ocultar as entradas nativas:

.checkbox input:checked, 
.checkbox input:not(checked),
.radio input:checked,
.radio input:not(checked) {
display
: none !important;
}

+ E adicione alguns estilos básicos com os quais confiamos:

.checkbox label, .radio label{
display
: inline-block;
position
: relative;
}
.checkbox input:checked + label,
.checkbox input:not(checked) + label,
.radio input:checked + label,
.radio input:not(checked) + label {

padding
-left: 25px;
padding
-bottom: 1px;
font
-size: 13px;
cursor
: pointer;
}

INFO: Estou selecionando explicitamente: verificado e: não (verificado) por este motivo:
Para navegador sem suporte: verificado meu conjunto de regras não se aplica, então a entrada nativa será exibida.

+ Agora adicionamos Pseudoelementos aos nossos rótulos para estados marcados e não marcados:

.checkbox input:not(checked) + label:before {
border
: 1px solid #CFCFCF;
content
: "";
display
: inline-block;

width
: 14px;
height
: 14px;

margin
-right: 10px;
position
: absolute;
left
: 0;
bottom
: 1px;

}
.checkbox input:checked + label:before{
border
: 1px solid #3E3E3E;
color
: #3E3E3E;
content
: "2713";
font
-size: 17px;
text
-align: center;
line
-height: 13px;
font
-weight: bold;
}

+ O mesmo para estilo de rádio:

.radio input:not(checked) +label:after,{
border
: 1px solid #CFCFCF;
content
: "";
display
: inline-block;
height
: 14px;
width
: 14px;
left
: 0;
bottom
: 1px;
position
: absolute;
text
-align: center;
font
-size: 13px;
line
-height: 15px;
font
-weight: bold;
}
.radio label:after {
border
-radius: 8px;
}
.radio input:checked + label:after{
border
-color: #3E3E3E;
background
-color: #3E3E3E;
box
-shadow: 0 0 0 2px #FFFFFF inset;

}

INFO: Confira um exemplo prático em Codepen: http://codepen.io/Robsn/full/Ihgiy

Divirta-se personalizando!