selector CSS para campos de entrada de texto?

Question

¿Cómo puedo orientar los campos de entrada de tipo 'texto' utilizando selectores de CSS?

Answer 1

input[type=text] 

o, para restringir a texto entradas se forma dentro

form input[type=text] 

o, para restringir aún más a una cierta forma, suponiendo que tiene ID myForm

#myForm input[type=text] 

Aviso: Este es no es compatible con IE6, por lo que si desea desarrollar para IE6, utilice 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 it is specified que por defecto los valores de atributos no siempre pueden ser seleccionables con selectores de atributos, uno podría tratar de cubrir otros casos de marcado para los que se prestan 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' 

Todavía esto deja el caso cuando el tipo está definido, pero tiene un valor no válido y que todavía recae en type = "text". Para cubrir que podríamos utilizar 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 el list of possible types está creciendo con nuevas características que se agregan a HTML.

Aviso: el :not pseudo-class solo se admite a partir de IE9.

Answer 2

Puede utilizar el selector de atributos aquí:

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

Esto es compatible con Internet Explorer 7 o superior. Puede usar IE7.js para agregar soporte para esto si necesita soportar IE6.

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

Answer 3

que suelen utilizar los selectores en mi hoja de estilo principal, a continuación, hacer un archivo .js IE6 específicos (jQuery) que añade una clase para todos los tipos de entrada. Ejemplo:

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

Y luego simplemente duplicar mis estilos en la hoja de estilos IE6 específica utilizando las clases. De esta forma, el marcado real es un poco más limpio.

Answer 4

Puede utilizar :text selector para seleccionar todas las entradas con texto tipo

Working Fiddle

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

:text es una extensión de jQuery y no forma parte de la especificación CSS, consultas utilizando: el texto no se puede aprovechar del 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; 
} 

Answer 5

Como @Amir publicado anteriormente, la mejor manera hoy en día - multi-navegador y dejando atrás IE6 - es utilizar

[type=text] {} 

Nadie mencionó CSS ​​menor especificidad (whyisthatimportant?) hasta ahora, [type=text]features 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.

normalize v4.0.0 recién publicado with lowered selector specificity.

Answer 6

Tenía el campo de texto del tipo de entrada en un campo de fila de la tabla. Yo estoy apuntando con el código

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

Answer 7

Con selector de atributos nos dirigimos a la entrada de texto tipo de CSS

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