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