Eu sou GRANDE, e você?
Como sabem começou a temporada de pesca, o que isso significa? Que começou o concurso Peixe grande!
Claro, que não iríamos ficar fora dessa… estamos competindo na categoria blog e esperamos pescar esse troféu!
Ao lado direito há um Box chamado “EU SOU GRANDE”, basta clicar no ícone do Peixe Grande e votar.
Vamos que vamos porque a competição começa hoje!
[]s à todos e claro, boa pescaria!
Como sabemos, não há como formatar diretamente algumas tags de formulários, tais como: checkbox, radio ou select.
Hoje mostrei de uma forma simples como “formatar” a tag de formulário checkbox utilizando css e jquery.
Primeiramente precisamos pegar duas imagens que representem o checkbox ativo e desativo, sugiro este site: http://www.iconfinder.com/search/?q=check+box. Eu juntei as imagens e trabalhei com css sprite.
Logo após isso, vamos criar no estrutura HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <label><span><input type="checkbox" value="0" id="chkAceitar" /></span> Aceitar os termos.</label> <label><span><input type="checkbox" value="1" id="chkReceber" /></span> Receber notÃcias.</label> </body> </html>
Com a estrutura criada, precisamos formatar nosso HTML com css
<style type="text/css">
label{
display:block;
}
label input{
filter: alpha(opacity=0);
-moz-opacity:.0;
opacity:.0;
-khtml-opacity: .0;
}
label span{
background-image:url(checkbox.png);
background-position:0 0;
background-repeat:no-repeat;
float:left;
height:10px;
margin:6px 6px 0 0;
width:10px;
}
label span.ativo{
background-position:0 -10px;
}
input{outline:none;}
</style>
Observe que eu deixei a tag input com opacidade zero e utilizei a tag span como máscara.
Agora basta criar o código javascript para podermos manipular quando o ckeckox for clicado.
Para isso o código é bem simples, vamos trabalhar com a classe “ativo” do css que criamos, assim poderemos verificar se a tag input está no seu estado ativo ou não.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('label span input').click(function(){
if($(this).parent('span').hasClass('ativo')){
$(this).parent('span').removeClass('ativo');
}else{
$(this).parent('span').addClass('ativo');
}
});
});
</script>
Viram como é simples? Na próxima vamos personalizar outras tags.
[],