Seletor CSS para campos de entrada de texto?

Como posso direcionar campos de entrada do tipo 'texto' usando seletores CSS?

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.

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

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.

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;
}

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;
}

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 .

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

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

input [type = text]

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

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/