selector de CSS para los campos de entrada de texto?

Question

¿Cómo se orienta campos de entrada de tipo 'texto' usando selectores CSS?

Answer 1

input[type=text]

o, para restringir a las entradas de texto dentro de formas

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 no es compatible con IE6, por lo que si se quiere desarrollar para IE6, ya sea de uso IE7.js (como se sugiere Jiang Yi) o empezar a añadir clases para todas sus entradas de texto

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

---

se especifica que los valores de los atributos por defecto no puede siempre ser seleccionables con selectores de atributos, se 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 en que se define el tipo, pero tiene un valor no válido y que todavía cae de nuevo a type = "text". Para la cubierta 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 la lista de posibles tipos está creciendo con nuevas características que se agregan a HTML.

Aviso: la :not pseudo-clase sólo 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 apoyado en IE7 y superiores. Puede usar IE7.js para añadir soporte para esto si que necesita para apoyar IE6.

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

Answer 3

Yo suelo usar 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 a continuación, sólo duplicar mis estilos en la hoja de estilo específica IE6 usando las clases. De esta forma el recargo real es un poco más limpia.

Answer 4

Se puede utilizar Selector :text para seleccionar todas las entradas de texto con el tipo

violín de Trabajo

$(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, consulta usando: texto no puede aprovechar el aumento de rendimiento proporcionado por el método nativo DOM querySelectorAll (). Para un mejor rendimiento en los navegadores modernos, el uso [type="text"] 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

tuve 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 6

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

[type=text] {}

Nadie mencionó menor especificidad CSS ( qué es href="http://snook.ca/archives/html_and_css/understanding_c" rel="nofollow"> importante ?) hasta el momento, [type=text] cuenta 0,0,1,0 0,0,1,1 vez de con input[type=text].

En cuanto al rendimiento que no hay impacto negativo en absoluto nada más.

normalizar v4.0.0 acaba de publicar con baja especificidad del selector .

Answer 7

Con selector de atributos de texto que nos dirigimos tipo de entrada en el CSS

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

Answer 8

entrada [type = texto]

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

Answer 9

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

[title] Todos los elementos con el atributo de título se seleccionan.

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

[título ~ = plátano] Todos los elementos que contienen 'banana' en el valor del atributo título.

[título | = plátano] Todos los elementos cuyo valor del atributo título comienza con 'banana'.

[título ^ = plátano] Todos los elementos que el valor del atributo título comienza con 'banana'.

[titulo = $ banano] Todos los elementos que el valor de los extremos de atributo título con 'banana'.

[* = título de plátano] Todos los elementos que el valor del atributo de título contiene la subcadena 'banana'.

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