Selector de CSS para campos de entrada de texto?

¿Cómo puedo dirigir campos de entrada de tipo 'texto' usando selectores CSS?

input[type=text]

o, para restringir las entradas de texto dentro de los formularios

form input[type=text]

o, para restringir aún más a una determinada forma, suponiendo que tenga identificación myForm

#myForm input[type=text]

Aviso: IE6 no lo admite, por lo que si desea desarrollar para IE6, use IE7.js (como sugirió Yi Jiang) o comience a agregar clases a todas sus entradas de texto.

Referencia: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Debido a que se especifica que los valores de atributo predeterminados no siempre se pueden seleccionar con selectores de atributos, se podría tratar de cubrir otros casos de marcado para los que se representan entradas de texto:

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'

Aún así, esto deja el caso cuando se define el tipo, pero tiene un valor no válido y que todavía recurre a type = "text". Para cubrir eso, podríamos usar seleccionar todas las entradas que no son uno de los otros tipos conocidos

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

Pero este selector sería bastante ridículo y también la lista de posibles tipos está creciendo con nuevas características que se agregan a HTML.

Aviso: la :notpseudoclase solo es compatible a partir de IE9.

Puede usar el selector de atributos aquí:

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

Esto es compatible con IE7 y superior. Puedes usar IE7.js para agregar soporte para esto si necesita soporte para IE6.

Consulte: http://reference.sitepoint.com/css/attributeselector para obtener más información.

Usualmente uso selectores en mi hoja de estilo principal, luego hago un archivo .js (jquery) específico de ie6 que agrega una clase a todos los tipos de entrada. Ejemplo:

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

Y luego simplemente duplicar mis estilos en la hoja de estilo específica de ie6 usando las clases. De esa manera, el marcado real es un poco más limpio.

Puede usar el :textselector para seleccionar todas las entradas con texto de tipo

Violín de trabajo

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

:textes una extensión jQuery y no forma parte de la especificación CSS, las consultas que utilizan: el texto no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para un mejor rendimiento en los navegadores modernos, use [type="text"]en su lugar. Esto funcionará para IE6+.

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

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

Tenía un campo de texto de tipo de entrada en un campo de fila de tabla. Estoy apuntando con código

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

Como @Amir publicó anteriormente, la mejor manera hoy en día (cross-browser y dejando atrás IE6) es usar

[type=text] {}

Nadie mencionó una especificidad CSS más baja ( ¿por qué es tan importante ?) Hasta ahora, [type=text] presenta 0,0,1,0 en lugar de 0,0,1,1 con input[type=text].

En cuanto al rendimiento, ya no hay ningún impacto negativo.

normalizar v4.0.0 recién lanzado con baja especificidad de selector .

Con el selector de atributos apuntamos al texto del tipo de entrada en CSS

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

entrada [tipo = texto]

Esto seleccionará todo el texto del tipo de entrada en una página web.

Los selectores de atributos a menudo se usan para entradas. Esta es la lista de selectores de atributos:

[título] Se seleccionan todos los elementos con el atributo de título.

[title = banana] Todos los elementos que tienen el valor 'banana' del atributo de título.

[title ~ = banana] Todos los elementos que contienen 'banana' en el valor del atributo title.

[title | = banana] Todos los elementos cuyo valor del atributo de título comienza con 'banana'.

[title ^ = banana] Todos los elementos cuyo valor del atributo title comienza con 'banana'.

[title $ = banana] Todos los elementos cuyo valor del atributo de título termina con 'banana'.

[title * = banana] Todos los elementos cuyo valor del atributo title contiene la subcadena 'banana'.

Referencia: https://kolosek.com/css-selectors/