Seletor CSS para <input type = “?”

105

Existe alguma maneira com o CSS de direcionar todas as entradas com base em seu tipo? Eu tenho uma classe desativada que uso em vários elementos de formulário desativados e estou definindo a cor de fundo para as caixas de texto, mas não quero que minhas caixas de seleção tenham essa cor.

Eu sei que posso fazer isso com classes separadas, mas prefiro usar CSS, se possível. Tenho certeza que posso definir isso em javascript, mas novamente procurando CSS.

Estou visando o IE7 +. Então, eu não acho que posso usar CSS3.

Editar

Com CSS3 eu seria capaz de fazer algo como?

INPUT[type='text']:disabled isso seria ainda melhor me livrar da minha classe completamente ...

Editar

Ok, obrigado pela ajuda! Então aqui está um seletor que modifica todas as caixas de texto e áreas que foram desabilitadas sem a necessidade de definir nenhuma classe, quando comecei esta pergunta nunca pensei que isso fosse possível ...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Isso funciona no IE7

JoshBerke
fonte
2
Escrevi um artigo com algumas informações detalhadas sobre seletores de atributos CSS.
Sarfraz

Respostas:

155

Sim. IE7 + suporta seletores de atributos:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Entrada de elemento com tipo de atributo que contém um valor que é igual a, começa com, contém ou termina com um determinado valor.

Outros seletores seguros (IE7 +) são:

  • Pai> filho que tem: p > span { font-weight: bold; }
  • Precedido por ~ elemento que é: span ~ span { color: blue; }

O <p><span/><span/></p>que efetivamente lhe daria:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Leitura adicional: Compatibilidade CSS do navegador em quirksmode.com

Estou surpreso que todo mundo pense que isso não pode ser feito. Os seletores de atributos CSS já existem há algum tempo. Acho que é hora de limpar nossos arquivos .css.

Filip Dupanović
fonte
Ok, eu tentei isso, mas não funcionou, agora está funcionando, então devo ter minha sintaxe bagunçada.
JoshBerke
Você fez meu dia! Agora, se você quiser passar minha semana, diga que pode ser feito no IE6 sem usar Expressions hehe :-) j / k ali
JoshBerke
13
Infelizmente, não pode. Parei de apoiar o IE6 por motivos religiosos e sugiro que todos nós também o façamos. Hoje eu uso o comentário condicional do IE para informar aos usuários que seu computador e privacidade estão em risco por usar o IE6 e que eles devem atualizar imediatamente: P
Filip Dupanović
1
Acho que estou tão acostumado a suportar o IE6 que presumi que também não funcionaria no IE7
TJ L
4
Eu gostaria de poder parar de suportar o IE6, mas não posso e não posso fazer o que você sugeriu ... Mas eu realmente realmente gostaria de poder ;-)
JoshBerke
3

Infelizmente, os outros participantes estão corretos, dizendo que você está ... na verdade corrigido por kRON, você está ok com seu IE7 e um documento rígido, mas a maioria de nós com requisitos do IE6 são reduzidos a referências de classe ou JS para isso, mas é uma propriedade CSS2, apenas uma sem suporte suficiente dos navegadores IE ^ h ^ h.

Por estar completo, o seletor de tipo é - semelhante ao xpath - do formulário, [attribute=value]mas existem muitas variantes interessantes. Ele será bastante poderoso quando estiver disponível, bom manter em mente para o IE8.

Annakata
fonte
Você tem uma referência de suporte de navegador mais atualizada? Isso é baseado no IE7 beta adoraria ver o IE8
JoshBerke
O IE8 ainda está em beta, mas quirksmode diz "sim": quirksmode.org/css/contents.html
annakata
Ainda estou dando suporte ao IE6, mas não adicionei esse pequeno ajuste visual.
JoshBerke
justo, foi meu erro responder com base no título, eu tendo a responder casos gerais - eu realmente deveria ler mais as perguntas :)
annakata
1

Você pode fazer isso com jQuery. Usando seus seletores, você pode selecionar por atributos, como tipo. Isso, no entanto, requer que seus usuários tenham o Javascript ativado e um arquivo adicional para baixar, mas se funcionar ...

cdeszaq
fonte
0

Desculpe, a resposta curta é não. CSS (2.1) marcará apenas os elementos de um DOM, não seus atributos. Você teria que aplicar uma classe específica para cada entrada.

Que chatice eu sei, porque isso seria incrivelmente útil.

Eu sei que você disse que prefere CSS ao invés de JavaScript, mas você ainda deve considerar o uso de jQuery. Ele fornece uma maneira muito limpa e elegante de adicionar estilos a elementos DOM com base em atributos.

Phil.Wheeler
fonte
jquery é a maneira de fazer isso, ou apenas JavaScript em geral
TravisO
4
Afaict, esta resposta está incorreta (a parte CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors . Caso contrário, esclareça a sua resposta.
cic
1
Desculpe - você está certo. Só espero o menos do IE7, porque muitas vezes os desenvolvedores ainda precisam oferecer suporte ao IE6 ao mesmo tempo. Deveria ter lido a pergunta com mais atenção e feito meu dever de casa.
Phil.Wheeler