Programação

Personalizar Radio Button com jQuery e CSS

Salve Salve galáxia, hoje um pequeno tutorial muito bacana e útil pra você, vou ensinar como personalizar radio button com jQuery e CSS, possibilitando alterar os checks do seu radiobutton pra ficar com um visual mais agradável no site/blog.

Veja aqui o exemplo

Como personalizar radio button com jQuery e CSS

Passo 1: O jQuery

Caso você já esteja chamando o jQuery na sua página, clique aqui e vá para o passo 2. Vamos inserir o jQuery na página e você pode colocar entre as tags < head >< /head > ou no rodapé do site (forma recomendada). Veja abaixo que estou usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Se precisar, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: add o jQuery Custom Radio Button

Você pode fazer o download do jQuery Custom Radio Button aqui ou pode usar ele direto do desenvolvedor (não recomendado), a diferença pro tutorial, será apenas o caminho que você vai colocar pra chamar seu arquivo, no exemplo abaixo, estou pegando direto do meu GitHub.

<script type="text/javascript" src=""https://raw.githubusercontent.com/Qcabeca/editar-radio-button/master/script.js"></script>

É isso, incluído o jQuery e o Custom Radio Button vamos para o próximo passo.

Passo 3: O Script

Você deve adicionar esse código, também dentro das tags < head > < / head > e abaixo do script do passo 2. Como vamos chamar o plugin jQuery Custom Radio Button para os radiobuttons dentro do id=form, o script vai ser mais ou menos assim:

<script type="text/javascript">
 var $j = jQuery.noConflict();
// Use jQuery com a variavel $j(...)
$j(document).ready(function(){
$j('#form input[type="radio"]').radiobutton({
    className: 'desmarcado', // classe para item default ou seja desmarcado
    checkedClass: 'marcado', // classe para item checked ou seja marcado
});
});
</script>

Guarde o nome dessas classes da linha 6 e 7, pois mais adiante precisaremos dela.

Passo 4: O HTML

Para esse exemplo onde vamos estilizar o radio button, iremos criar um formulário com 4 inputs de radio, sendo eles: Opção A, Opção B, Opção C e Opção D. Como você já viu no exemplo, nesse form existe uma opção por linha, com rótulo. Então o HTML ficou assim

HTML

<form name="form" id="form" action="" method="post">
<div class="linha">
  <input type="radio" value="Opção A" name="opcao-a" id="opcao-a" checked="checked">  <label>Opção A</label>
</div>
<div class="linha">
  <input type="radio" value="Opção B" name="opcao-b" id="opcao-b">
  <label>Opção B</label>
</div>
<div class="linha">
  <input type="radio" value="Opção C" name="opcao-c" id="opcao-c">
  <label>Opção C</label>
</div>
<div class="linha">
  <input type="radio" value="Opção D" name="opcao-d" id="opcao-d">
  <label>Opção D</label>
</div>
</form>     

Agora com o HTML já criado, vamos estilizar o CSS para personalizar o radiobutton

Passo 5: O CSS

Como você viu no HTML acima, temos as seguintes opções para estilizar:
#form - ID do formulário
.linha - classe de linha para opções
label - Etiqueta para cada opção do radio button.

Mais além das opções acima, no passo 3 no script, definimos duas classes de CSS, uma para quando estiver marcado (checked) e outra quando estiver desmarcado (unchecked), então os nomes ficaram assim

.desmarcado - quando input radio está desmarcado
.marcado - quando input radio está marcado

É óbvio que você pode modificar o CSS para suas necessidades, mas no exemplo está conforme abaixo

#form {
float:left;
}
.linha {
	float:left;
	width:100%; /* pra deixar 1 opção por linha */
	line-height:30px; /*sempre a mesma altura do 'desmarcado' e 'marcado' */
}
.desmarcado {
    background: url("http://exemplo.quebrandoacabeca.com/editar-radio-button/bg-radio-button.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
	height:30px;
	width:30px;
	float:left;
}
.marcado {
    background: url("http://exemplo.quebrandoacabeca.com/editar-radio-button/bg-radio-button.jpg") no-repeat scroll 0 -28px rgba(0, 0, 0, 0) !important;
	height:30px;
	width:30px;
	float:left;
}

Único detalhe a destacar é que nas classes marcado e desmarcado, eu uso a mesma imagem de background, alterando apenas o posicionamento do bg. Se você quiser deixar as 4 opções lado a lado, altere o width na linha 7 para 25% ou personalize como achar melhor e está pronto.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

FONTE: http://tomekwojcik.github.io/jQuery-Custom-Radiobuttons/

Bom, agora você já sabe como Personalizar Radio Button com jQuery e CSS, ficou com alguma dúvida? Deu certo? Comente!

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado