Seletor CSS para campos de entrada de texto?

Respostas:

674
input[type=text]

ou, para restringir a entradas de texto dentro de formulários

form input[type=text]

ou, para restringir ainda mais a uma determinada forma, supondo que ela tenha id myForm

#myForm input[type=text]

Aviso: Isso não é suportado pelo IE6, portanto, se você deseja desenvolver o IE6, use o IE7.js (como sugerido por Yi Jiang) ou comece a adicionar classes a todas as entradas de texto.

Referência: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors


Como é especificado que os valores de atributo padrão nem sempre podem ser selecionáveis ​​com seletores de atributo, pode-se tentar cobrir outros casos de marcação para os quais as entradas de texto são renderizadas:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

Ainda assim, isso deixa o caso quando o tipo é definido, mas tem um valor inválido e que ainda volta a type = "text". Para cobrir o que poderíamos usar, selecione todas as entradas que não são um dos outros tipos conhecidos

input:not([type=button]):not([type=password]):not([type=submit])...

Mas esse seletor seria bastante ridículo e também a lista de tipos possíveis está crescendo com novos recursos sendo adicionados ao HTML.

Aviso: a :notpseudo-classe é suportada apenas a partir do IE9.

Alin Purcaru
fonte
41
+1 por citar o padrão atual, em vez de algum site tutorial
Šime Vidas
7
Obrigado. Notei que as pessoas citam a primeira coisa que aparece no Google ... ou no w3schools.
Alin Purcaru
Sim, isso é meio-de chato
Šime Vidas
Funciona no IE6? Para uma solução entre navegadores, eu prefiro adicionar classes (.input-text, .input-submit, etc) é uma droga para o desenvolvimento de html, mas torna o css e o javascript um pouco mais agradáveis.
zzzzBov
11
@MubasharAhmad Atualizei minha resposta e, como você pode ver, só há uma solução alternativa se você estiver direcionando navegadores acima do IE9.
Alin Purcaru 04/04
37

Você pode usar o seletor de atributos aqui:

input[type="text"] {
    font-family: Arial, sans-serif;
}

Isso é suportado no IE7 e acima. Você pode usar o IE7.js para adicionar suporte para isso, se precisar oferecer suporte ao IE6.

Consulte: http://reference.sitepoint.com/css/attributeselector para obter mais informações

Yi Jiang
fonte
Tome cuidado, a família de fontes genérica correta é sans-serif, não san-serif.
Volker E.
14

Eu normalmente uso seletores na minha folha de estilo principal e, em seguida, crie um arquivo .js (jquery) específico do ie6 que adicione uma classe a todos os tipos de entrada. Exemplo:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

E então apenas duplique meus estilos na folha de estilo específica do ie6, usando as classes. Dessa forma, a marcação real é um pouco mais limpa.

garrettwinder
fonte
Isso é muito lento
Hidayt Rahman
8

Você pode usar o :textSeletor para selecionar todas as entradas com o tipo de texto

Violino de trabalho

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:texté uma extensão jQuery e não faz parte da especificação CSS, consultas usando: text não podem tirar proveito do aumento de desempenho fornecido pelo método nativo query querySelectorAll () do DOM. Para um melhor desempenho em navegadores modernos, use-o [type="text"]. Isso irá funcionar IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}
Aamir Shahzad
fonte
2

Eu tinha um campo de texto de tipo de entrada em um campo de linha da tabela. Estou segmentando com código

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
Amit Mhaske
fonte
0

Como o @Amir postou acima, a melhor maneira hoje em dia - entre navegadores e deixando para trás o IE6 - é usar

[type=text] {}

Ninguém mencionou menor especificidade de CSS ( por que isso é importante ?) Até agora, apresenta 0,0,1,0 em vez de 0,0,1,1 com . [type=text] input[type=text]

Em termos de desempenho, não há mais nenhum impacto negativo.

normalize v4.0.0 recém-lançado com especificidade de seletor reduzida .

Volker E.
fonte
0

Com o seletor de atributos, direcionamos o texto do tipo de entrada em CSS

input[type=text] {
background:gold;
font-size:15px;
 }
Santosh Khalse
fonte
0

input [type = text]

Isso selecionará todo o texto do tipo de entrada em uma página da web.

Navneet Kumar
fonte
-1

Os seletores de atributo são frequentemente usados ​​para entradas. Esta é a lista de seletores de atributos:

[title] Todos os elementos com o atributo title são selecionados.

[title = banana] Todos os elementos que possuem o valor 'banana' do atributo title.

[title ~ = banana] Todos os elementos que contêm 'banana' no valor do atributo title.

[title | = banana] Todos os elementos cujo valor do atributo title começa com 'banana'.

[title ^ = banana] Todos os elementos cujo valor do atributo title começa com 'banana'.

[title $ = banana] Todos os elementos cujo valor do atributo title termina com 'banana'.

[title * = banana] Todos os elementos cujo valor do atributo title contém a substring 'banana'.

Referência: https://kolosek.com/css-selectors/

Nesha Zoric
fonte