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!

13 thoughts on “CRIR – Checkbox & Radio Input Replacement”

  1. 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"

  2. 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.

  3. 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.

  4. 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!

  5. Pingback: CRIR - Checkbox & Radio Input Replacement « [REF]
  6. Eu achei uma coisa parecida, já tem um tempo, nao estudei e nem implementei, mais de qualquer forma o link para os colegas…

    .

  7. É 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.

  8. 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 ?

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

  10. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *