Esta se tornando cada vez mais comum a pratica de Designers projetar formulários com visual diferente do padrão exibido pelos browsers.  Para implementar tal inovação, os desenvolvedores vem buscado soluções de scripts que não comprometam a acessibilidade e a performance do website.

Neste post irei demostrar uma solução que criei para personalizar inputs do tipo checkbox e radio, também listarei algumas referências de plugins muito úteis para customizar outros elementos do seu form.

Personalização de inputs checkbox e radio ( demo )

Para personalizar inputs do tipo checkbox e radio é muito simples, primeiro vamos utilizar a marcação abaixo:

<ol class="list_radio">
   <li><input type="radio" id="rad1" name="exemplos" class="rad" /> <label for="rad1">Label 1</label></li>
   <li><input type="radio" id="rad2"  name="exemplos" class="rad"  /> <label for="rad2">Label 2</label></li>
   <li><input type="radio" id="rad3" name="exemplos" class="rad"  /> <label for="rad3">Label 2</label></li>
</ol>

<ol class="list_check">
   <li><input type="checkbox" id="chck1" class="chck" /> <label  for="chck1">Label 1</label></li>
   <li><input type="checkbox" id="chck2" class="chck" /> <label  for="chck2">Label 2</label></li>
   <li><input type="checkbox" id="chck3" class="chck" /> <label  for="chck3">Label 3</label></li>
</ol>

No CSS vamos aproveitar a herança das classes ( list_check e list_radio ) para colocar os respectivos backgrounds nos labels.

/* Estilo para type='radio'*/
.list_radio li { float: left; margin-right: 15px}
.list_radio li label { background: url(radio_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_radio li label.ativo { background-position: 0 -25px}

/* Estilo para type='checkbox'*/
.list_check li { padding-bottom: 10px}
.list_check li label {  background: url(check_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_check li label.ativo { background-position: 0 -26px}

Pelo jQuery iremos controlar a adição e remoção da classe ativo no label.

$(document).ready(function() {
  //escondendo os inputs padrões
  $(".rad, .chck").hide();
  //verificando se exite inputs marcados
  $("form input").each(function(i){
    if($(this).is(':checked')) {
         $(this).siblings('label').addClass("ativo");
    }
  });
  // Radios estilizados
  $(".list_radio label").click(function() {
    $(this).parent().siblings().children("label").removeClass("ativo");
    $(this).addClass("ativo");
    $(this).siblings('input[type=radio]').attr("checked", "checked");
  });
  // Checkboxs estilizados
  $(".list_check label").toggle(
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "checked");
       $(this).addClass("ativo");
    },
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "");
       $(this).removeClass("ativo");
  });
});

Outras customizações

• Customização de selects

  »
  » info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

• Personalização de input text

  É comum a utilização de cantos arrendodados em campos do tipo texto. As CSS3 já estão vindo com suporte a esta funcionalidade (ver código abaixo), porém para o Internet Explorer é necessário acrescentar um script .

  -moz-border-radius: 5px;/* Firefox */
  border-radius: 5px; /* css3 */
  -webkit-border-radius: 5px; /* Browsers webkit */

• Customização de input file

  » www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  » marcgrabanski.com/pages/code/style-file-input

É importante resaltar que fugir demais do padrão dos formulários do browser pode comprometer a usabilidade e performance do site. Desta forma o Designer tem que avaliar bem a experiência e limitações dos usuários antes de implementar essas inovações.