Selector de CSS para campos de entrada de texto?

Respuestas:

674
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.

Alin Purcaru
fuente
41
+1 por citar el estándar real en lugar de algún sitio web tutorial
Šime Vidas
77
Gracias. Me di cuenta de que la gente cita lo primero que aparece en Google ... o en w3schools.
Alin Purcaru
Sí, eso es un poco molesto
Šime Vidas
¿Funciona en IE6? Para una solución de navegador cruzado, tiendo a preferir agregar clases (.input-text, .input-submit, etc.) es una mierda para el desarrollo de html, pero hace que css y javascript sean un poco más agradables.
zzzzBov
1
@MubasharAhmad He actualizado mi respuesta y, como puede ver, hay una solución solo si está apuntando a navegadores por encima de IE9.
Alin Purcaru
37

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.

Yi Jiang
fuente
Tenga cuidado, la familia de fuentes genérica correcta es sans-serif, no san-serif.
Volker E.
14

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.

buhardilla
fuente
Eso es muy lento
Hidayt Rahman
8

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;
}
Aamir Shahzad
fuente
2

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;
}
Amit Mhaske
fuente
0

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 .

Volker E.
fuente
0

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

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

entrada [tipo = texto]

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

Navneet Kumar
fuente
-1

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/

Nesha Zoric
fuente