Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Dica Rápida: Caixas de Seleção e Botões de Rádio Fáceis com CSS3

by
Length:LongLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Já se perguntou como estilizar caixas de seleção e botões de rádio sem JavaScript? Graças ao CSS3, é possível! Eis o que criaremos:

Se estiver buscando alguns gráficos para usar com os elementos de UI do formulário, veja os kits de UI disponíveis na Envato Elements. Caso contrário, peguemos um café e comecemos o tutorial.

1. Entendendo o Processo

Leitura RecomendadaOs 30 Seletores CSS Que Você Deve Memorizar

Para aqueles confiantes nas habilidades CSS e só precisa da direção correta, eis a linha de CSs mais importante de todo o tutorial:

Agora, para aqueles que precisam de mais ajuda, sigam em frente!

Certo, de volta ao tópico. O que exatamente faremos? Bem, pelo pseudo seletor :checked do CSS3, somos capazes de mirar um elemento baseado em sua posição de marcado (ou não) Podemos, então, usar o seletor de irmão adjacente, +, do CSS2.1 para mirar o elemento diretamente após a caixa de seleção ou rádio, que aqui será um label.

2. Preparando Nosso HTML

Agora, começamos criando nosso HTML e CSS (ou o que preferirmos usar para os estilos). Assumiremos que todos sobemos o que fazer para não atrasarmos.

Para poder guiar pela resposta correta, apenas mostraremos essa técnica na caixa de seleção, mas o processo para os botões de rádio é idêntico e está incluso no código fonte.

Certo, podemos começar? Então criemos nossa caixa de seleção, seguida de um label.

Agora, caso não saiba muito sobre o elemento <label>, devemos conectá-lo a um input para podermos interagir com o último através do primeiro. Isso é feito usando for="" com o ID do campo de entrada.

Também adicionaremos um <span> dentro da label, que é uma preferência nossa, mas fará mais sentido no passo 3.

3. O Que Queremos: CSS

Aqui a diversão começa. Primeira coisa a fazer, que é a base de todo o tutorial, é esconder a caixa de seleção verdadeira.

Uma vez feito, podemos estilizar a label, em específico o span dentro dela. Fazemos isso para ter mais controle sobre a posição exata da caixa de seleção. Sem ele, teríamos de usar imagens de plano de fundo diretamente na label e seu posicionamento é difícil.

Muito bem, expliquemos rápido. Primeiro, notemos o plano de fundo. Temos uma pequena folha de sprite, assim o que configuraremos a posição do plano de fundo no span. O span em si é da largura e altura exata de cada "sprite" na folha, facilitando a definição de cada estado.

Our sprite sheet
Nossa folhas de sprite

Eis o resto do CSS, específico para nosso estilo. É só estética, para nosso gosto e design.

4. Fazendo Funcionar

Não tem muito mais o que fazer, então terminemos. A última coisa que faremos é prover um estado para o elemento quando o campo estiver selecionado e, opcionalmente, quando com o mouse posicionado sobre. É bem simples, vejamos.

Como usamos a folha de sprite, so precisamos mudar a posição do plano de fundo. Notemos que, para estilizar o span quando a caixa de seleção/botão de rádio está selecionada bastou usar :checked da CSS3.

Nota Rápida Sobre Suporte dos Navegadores

Pseudos Seletores tem grande suporte pelos navegadores, mas problemas podem ocorrer. Felizmente a alternativa é graciosa:

Can I use data for pseudo selectors
Dados do Can I Use para pseudo seletores no geral
IE9 on Windows 7
Alternativa: IE9 no Windows 7.

Navegadores móveis antigos também causam problems - suporte a :checked é confuso. Safari Mobile antes do iOS 6 não suporta, por exemplo.

Conclusão

Certo, terminamos, não é? Chequemos tudo. Primeiro o HTML:

Parece o mesmo? Não esqueçamos da <span>! Ao experimentar por conta própria, recomendamos tentar novas e diferentes maneiras para essa parte. Adoraríamos ver o que vocês conseguiram fazer e se foi mais eficiente. Agora o CSS:

Tudo presente? Perfeito. Lembremo-nos que muitos desses estilos são específico ao estilo criado para a demo. Encorajamos a criarem seus próprios e a experimentarem com o posicionamento e apresentação.

Concluindo, a coisa mais importante a levar consigo é a primeira linha de CSS que escrevemos bem no começo:

Usando isso, podemos criar várias coisas diferentes. As possibilidade com :checked vão além das caixas de seleção e rádios de formulários. Mas, a parte da descoberta é por conta de vocês. Eis algo a se experiementar:

  • Adicionemos folhas de sprite "2x" para telas retina
  • Usar SVG ao invés de mapas de bit

Esperamos que tenham curtido esse pequeno tutorial e que o que viram aqui sirva muito e que possam aprimorá-lo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.