Web standards, arquitetura da informação, usabilidade, acessibilidade, tecnologia, filosofia de buteco (sic), e qualquer coisa em uma casca de noz!

Ir direto para o conteúdo

CRIR – Checkbox & Radio Input Replacement

Por: Henrique Pereira

Wednesday 11 April 2007 às 11:22

Categoria: HTML / CSS / JavaScript

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!

Artigos relacionados:

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!



Existem 13 comentários para “CRIR – Checkbox & Radio Input Replacement”

# 1° Julio Fragoso Wednesday 11 April 2007 às 11:47GMT

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° Yalli Oliveira Wednesday 11 April 2007 às 13:07GMT

Show de Bola…

# 3° Julio Fragoso Wednesday 11 April 2007 às 15:56GMT

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° Luiz Gustavo Wednesday 11 April 2007 às 15:14GMT

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.

# 5° Anderson Custódio Wednesday 11 April 2007 às 18:15GMT

Essa era umas das coisas que eu sempre quis :)
Valeuuuuuu! =D

# 6° Carlos Eduardo Wednesday 11 April 2007 às 19:19GMT

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

# 7° Diego Wednesday 11 April 2007 às 20:36GMT

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!

# 8° Marcus Silva Thursday 12 April 2007 às 01:42GMT

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.badboy.ro/articles/2007-01-30/niceforms/

# 9° Alexandre Monday 16 April 2007 às 04:03GMT

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

# 10° Nickael Almeida Friday 27 April 2007 às 16:15GMT

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 ?

# 11° Carol Sunday 17 June 2007 às 16:02GMT

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

# 12° Marcelo Coelho Thursday 22 January 2009 às 21:30GMT

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.

Deixe um comentário

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

Informações de Contato

Sobre o Revolução Etc

Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Publicidade

  • Banner
  • Banner

Henrique Costa Pereira - Revolução Etc - (CC) Alguns Direitos Reservados - Powered by WordPress

O conteúdo deste site de autoria de Henrique Costa Pereira está sob a licença de Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil. Permissões e/ou restrições além do escopo desta licença podem ser vistas e/ou requeridas na minha página de licença.

Nenhum conteúdo deste site pode ser copiado e reproduzido em outro site sem autorização do autor! Mais detalhes aqui!

Powered by WordPress