Personalizando opção input radio com CSS

Com o CSS hoje em dia, é bem simples fazer personalizações que antes de ser descoberto era impossível de se fazer. Hoje, iremos aprender como personalizar as listas de opções do formato input radio – para quem não lembra a bolinha que faz a seleção. Ele funciona no formato WebKit (formato utilizado no Google Chrome, Safari, entre outros). Iremos mostrar como converter para outros formatos (-moz, -o, etc.) esses códigos. Vamos começar?

1. O primeiro passo é bem simples, você terá que criar uma lista com o input radio. Para isso, utilize o seguinte código. Cole o código em uma postagem de testes na opção HTML.

<input type="radio" name="exemple" value="/view/classic">Opção 1</input>

2. A criação do input radio foi somente para você poder visualizar ele. Agora, você deverá acessar o painel de controle de seu blog e clicar na opção Modelo. Logo em seguida, você deverá clicar no botão Editar HTML e pressionar Ctrl+F e procurar pelo seguinte código.

]]></b:skin>

3. Cole acima do código descrito o seguinte código. Lembre-se de personalizar para ficar parecido com o seu blog, para deixá-lo mais combinativo.

input[type='radio'] {
-webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 3px;
-webkit-transition: border 500ms;
background: -webkit-linear-gradient(#fafafa, #dcdcdc);
border-radius: 100%;
border: 1px solid #a0a0a0;
display: inline-block;
height: 15px;
margin-bottom: 0;
position: relative;
top: 3px;
vertical-align: baseline;
width: 15px;
}
input[type='radio']:disabled {
opacity: .75;
}
input[type='radio']:not(:disabled):not(:active):hover {
background: -webkit-linear-gradient(#fff, #e6e6e6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
input[type='radio']:not(:disabled):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
background: -webkit-linear-gradient(#f0f0f0, #bebebe);
border: 1px solid #808080;
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
input[type='radio']:checked::before {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-webkit-margin-start: 4px;
background: #808080;
border-radius: 10px;
content: '';
display: inline-block;
font-size: 13px;
font-weight: 400;
height: 5px;
left: 0;
margin-top: 4px;
opacity: 1;
position: absolute;
top: 0;
vertical-align: top;
width: 5px;
}
html[dir='rtl'] input[type='radio']:checked::before {
right: 0;
}
input[type='radio']:active:checked::before {
background: #606060;
}

4. Clique no botão Visualizar e na postagem que você publicou, veja se ficou correta como na imagem abaixo. Clique em Salvar modelo.

Antes

Depois

Viu como o CSS pode nos possibilitar muitas coisas? Nos próximos artigos, falaremos como converter códigos em WebKit para Moz, O, entre outros e vice-versa. Se você ainda tem dúvidas, compartilhe-a através dos comentários.