CRIR – Checkbox & Radio Input Replacement

O CRIR (Checkbox & Radio Input Replacement) é uma combinação de JavaScript com CSS que permite você personalizar a aparência dos elementos checkbox e radio button, trocando-os por imagens. Este script é muito útil quando você quer ter uma interface 100% personalizada. O mais importante do script é que ele é 100% não obstrusivo, ou seja, se desabilitar o javascript do seu browser você passa a ver os checkbox e radio buttons normalmente, com a aparência padrão que seu browsers está acostumado a renderizar.

Para implementar, basta linkar o script (isto é óbvio pra você, certo?) e a folha de estilos específica para ele e adicionar uma classe no elemento (ou checkbox ou radio button) que quer que o javascript substitua pelas imagens previamente preparadas por você. Vale lembrar que existe algumas declarações no CSS responsáveis pelo endereçamento das imagens que deve substituir os elementos nos status de selecionado e não selecionado. No site do criador do script ele dá as dicas com mais detalhes de como implementar. O script é gratuito e pode ser baixado aqui! Meu conselho é que leia o texto do autor antes de tentar fazer alguma mágica!

  • http://julioweb.wordpress.com Julio Fragoso

    muito bom isso, e o fato de ser 100% não obstrusivo é importantíssimo para as interfaces de hoje em dia, no qual se pensa muito no usuário final.

    Parabéns pela "descoberta"

  • http://webnatal.wordpress.com Yalli Oliveira

    Show de Bola…

  • Luiz Gustavo

    Bem interessante. Estava vendo o exemplo no site do criador e só fiquei em dúvida se um usuário/visitante mais desavisado vai entender que aquilo alí é um checkbox "disfarçado". Isso lembra aquela máxima do "Não me faça pensar". Os checkbox e radiobuttons, mesmo que feios, já estão no "inconciente coletivo" e todo mundo já conhece suas funções, não sei se uma imagem no lugar vai passar a mesma idéia.

    Até funciona, mas o contexto tem que ser bem explicado com alguma legenda ou algo assim.

  • http://julioweb.wordpress.com Julio Fragoso

    olha só luiz… concordo em partes contigo, mas acho que essa questão de não me faça pensar é bem complicada, acho que o povo também não pode confundir não me faça pensar com não me faça ler.

    E se pensarmos que aquele exemplo não foi feliz, nós podemos mudar aquele exemplo para um melhor. uma imagem que lembre os antigos.

    Só acho que sites bonitos e agradáveis devem se ploriferar nessa antiga e ótima internet.

  • http://andersoncustodio.com Anderson Cust&oacute

    Essa era umas das coisas que eu sempre quis :)

    Valeuuuuuu! =D

  • http://project47.viscountbox.com Carlos Eduardo

    Muito bom!

    Fiquei curioso para testar o recurso…. Bem interessante =)

  • http://www.cot.org.br/ Diego

    Legal mesmo, Henrique!!!

    São posts desses que deixar o Revolução ETC como um dos blogs de leitura obrigatória todos os dias!

    Parabéns!

  • Pingback: CRIR - Checkbox & Radio Input Replacement « [REF]()

  • Marcus Silva

    Eu achei uma coisa parecida, já tem um tempo, nao estudei e nem implementei, mais de qualquer forma o link para os colegas…

    .

  • http://www.acordapraweb.com/ Alexandre

    É legal, mas como todo replacement não-obstrusivo em Javascript (sIFR, Javascript-Titles, UFO, etc..) deve ser usado com moderação, não vá colocar um desses em um daqueles formulários de 8 páginas (que eu espero que estejam caindo em desuso) que sua aplicação demorará um bocado de tempo pra abrir.

  • Nickael Almeida

    Ola pessoal….

    Não tive tempo de ler todos os comentários, talvez a minha pergunta ja tenha sido respondida mais é o seguinte.

    No IE quando eu clico no campo ela da uma piscada antes de trocar a imagem… Isso não pode ser resolvido ?

  • Carol

    Alguém sabe uma forma desse script funcionar em checkboxes "select all"? Não consigo adaptar de jeito nenhum =/

  • Marcelo Coelho

    Uma pena, este script não funcionou no Safari, apesar de ter funcionado no Firefox (Mac).

    Eu acho válido substituir a imagem do checkbox, desde que por uma imagem que lembre um checkbox.

    PS: O captcha deste formulário também não funcionou no Safari, estou postando este comentário usando Firefox.