[Resolvido] Estilizar Radio Button

[Markos Lima 0]

Olá Pessoal.

 

Galera: no Net Shoes (por exemplo) quando vamos comprar um tênis, temos que escolher o tamanho, certo?

 

Aquele escolher tamanho são radio buttons estilizados, ou é ignorância minha? rsrs

 

Se for, alguém sabe como estilizar radio button, para deixar parecido?

 

Abraços e obrigado =D

[Bruno Augusto 417]

Você até consegue alguma estilização apenas com CSS, mas radiobuttons caprichados mesmo só com JavaScript.

 

Aqui tem algumas possibilidades.

[angelorubin 142]

Boa tarde,

 

Sim, você esta equivocado, eles utilizam listas não-ordenadas.

 

Clique aqui

[Diéssica 140]

Sim, você esta equivocado, eles utilizam listas não-ordenadas.

E o Javascript faz o resto, inclusive a atuação como radio button.

[Evandro Oliveira 331]

Sim, você esta equivocado, eles utilizam listas não-ordenadas.

 

A UI foi feita com LI por ser mais fácil de manipular com CSS. Mas há, sim, radioButtons no formulário.

 

console.log(document.getElementById('frmProduto').elements);

[No Rain 0]

Markos, talvez o código que eu utilizo para personalizar radio buttons e checkbox pode te ajudar.

 

Se você entrar neste link http://www.novoimovel.com.br/procuro-imovel.asp vai perceber que o checkbox está estilizado bem diferente do checkbox padrão.

 

Pra estilizar o checkbox (ou o radio button) eu basicamente adiciono uma div logo após o elemento e estilizo esta div para ficar bem atrás do checkbox. Deixo este checkbox totalmente transparente e através do jquery eu manipulo a posição da imagem de fundo da div a cada click no checkbox.

 

Então vamos lá, primeiro eu crio uma classe estilizando o meu checkbox fake que será aplicado na div.

.novoCheck { 
background: url("http://www.novoimovel.com.br/imagens/checkbox.gif") no-repeat transparent;
display: inline-block;
height: 16px;
margin-right: -16px;
vertical-align: middle;
width: 16px;
}

a margem negativa serve para a div se posicionar bem em cima do checkbox. Vamos deixar o checkbox invisivel só no final para compreender melhor o processo do jquery.

 

Criamos o formulário

 

<form id="buscaimovel">
<ul>
<li><input type="checkbox" name="caracteristicas" value="3" />02 Dorms.</li>
<li><input type="checkbox" name="caracteristicas" value="1" />Banheiro</li>
<li><input type="checkbox" name="caracteristicas" value="7" />Churrasqueira</li>
</ul>
</form>  

 

Com o formulário pronto vamos adicionar no head nosso código jquery:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">   
$().ready(function() { 

$('input:checkbox').before("<div></div>"); // cria uma div na frente de cada checkbox do seu formulário
$('input:checkbox').prev('div').addClass('novoCheck'); // adiciona a classe "novoCheck" a essas divs
$('input:checkbox').click(function(){ // inicia a função do clique
if($(this).is(':checked')){ // se o checkbox for marcado ao clicar:
$(this).prev('div').css({'background-position':'0 -16px'}); //muda o fundo da div de posição
} else { // senão (nesse caso o clique está desmarcando o checkbox e:
$(this).prev('div').css({'background-position':'0 0'}); // o bg da div deve voltar para a posição inicial
}
});


}); 
</script>

 

Observe que no site utilizei a mesma técnica para estilizar o select com alguns comandos extras necessários. na página principal deste site o mesmo pode ser notado com o radio button localizado no campo de busca na lateral esquerda do site.

 

Espero ter ajudado e fique a vontade para fuçar no código fonte do site ou perguntar caso tenha dúvidas quanto ao código.

 

Abraço

[angelorubin 142]

A UI foi feita com LI por ser mais fácil de manipular com CSS. Mas há, sim, radioButtons no formulário.

 

console.log(document.getElementById('frmProduto').elements);

 

Ele foi bem específico Evandro, " ... no Net Shoes (por exemplo) quando vamos comprar um tênis, temos que escolher o tamanho ... ".

 

E lá no código nesta parte eles utilizam UL LI.

 

Clique aqui

[Evandro Oliveira 331]

Como eu disse, a UI foi feita com LI por ser mais fácil de manipular o CSS.

 

Mas a info é enviada via radioButton

Clique aqui

[Markos Lima 0]

Valeu galera pelas dicas, estou tentando deixar parecido com o do Netshoes, mas é bem complicado mesmo einh!

Por hora vou estilizar de uma maneira mais simples! Obrigado a todos!