0 Compartilhamentos 1134 Views

Como separar o CSS do elemento INPUT por tipo

26 de janeiro de 2014

Um formulário já é algo chato de preencher na maioria das vezes. Mas ele não precisa ser feio também e, felizmente, com o poder do CSS, você pode customizar completamente sua aparência.

Você pode especificar no seu CSS uma série de estilos para o elemento <input> em seu formulário. Mas é uma solução genérica demais se nem todas os <input> do seu site devem se comportar da mesma forma. Antigamente eu especificava uma ou mais classes que controlavam borda, cor de fundo, fonte e espaçamento e depois aplicava essas classes a cada elemento. Mas é possível ser mais eficiente e mais criativo do que isso usando o seletor certo. E nem estou falando de CSS3!

O bom e velho CSS2 permite que você determine estilos para tipos de <input>. Por exemplo:

input[type="password"] {
border: 1px solid #c00;
background-color: #f5f5f5;
}

Com o seletor [type=”password”] acima, eu determinei que todos os elementos <input> do tipo password tenham uma borda vermelha e uma cor de fundo acinzentada. Pelo mesmo princípio, eu poderia ter utilizado:

  • input[type=”button”]
  • input[type=”checkbox’]
  • input[type=”image”]
  • input[type=”radio’]
  • input[type=”reset”]
  • input[type=”submit’]
  • input[type=”text’]

Por razões óbvias, o <input type=”hidden”> não foi incluído entre as opções. Mas, com o advento do HTML 5, o número de tipos mais que dobra!

Entretanto, os seletores de CSS não param por aí. Com input[disabled][type=”text”], você irá customizar apenas os input  do tipo text que estejam desabilitados, por exemplo. E os seletores são cumulativos: input[disabled][type=”text”]:hover cria um estilo para quando o mouse passar por cima de um input  do tipo text que esteja desabilitado!

Mais, o seletor :focus permite alterar o estilo do campo de formulário quando ele está em foco, ou seja, quando o cursor do mouse está ativado dentro da caixa, esperando o usuário digitar.

Carregando...

Você pode se interessar

Influenciadores digitais que não existem
Artigos
80 visualizações
Artigos
80 visualizações

Influenciadores digitais que não existem

Carlos L. A. da Silva - 2 de dezembro de 2021

Na era da pós-verdade, influenciadores que não são reais estão ganhando espaço para uma multidão que quer ser influenciada

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada
Artigos
213 visualizações
Artigos
213 visualizações

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada

Carlos L. A. da Silva - 23 de novembro de 2021

Aplicativo oficial do sistema educacional da capital Suécia era ruim demais, mas a lei é a lei...

10 recursos HTML5 úteis que você pode não estar usando
Artigos
466 visualizações
Artigos
466 visualizações

10 recursos HTML5 úteis que você pode não estar usando

Carlos L. A. da Silva - 6 de novembro de 2021

O HyperText Markup Language nos acompanha desde os primórdios da web. É o seu tijolo mais básico. Podem surgir novas tecnologias, plugins, frameworks, conteúdo rico, mas o bom e velho HTML continua sendo a base de tudo e aprender seus mais profundos nuances é fundamental para os desenvolvedores. O HTML5 é a implementação atual da […]

Deixe um Comentário

Your email address will not be published.

Mais publicações

O Metaverso está vindo?
Artigos
528 visualizações
528 visualizações

O Metaverso está vindo?

Carlos L. A. da Silva - 1 de novembro de 2021
Por que eu decidi não migrar para o Windows 11 agora
Artigos
635 visualizações
635 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021
Sir Clive Sinclair, o homem adiantado no tempo
Artigos
926 visualizações
926 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021