html - selectores - Selector de CSS para los campos de entrada de texto?

input sin borde bootstrap

Question

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

Answer 1

Como @Amir publicó más arriba, la mejor manera hoy en día, usar el navegador cruzado y dejar atrás IE6, es utilizar

[type=text] {}

Nadie mencionó una especificidad de CSS más baja ( why is that important ?) 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.

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

Answer 2

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

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

Answer 3

Los selectores de atributo se utilizan a menudo para las 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 title.

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

[title | = banana] Todos los elementos cuyo valor del atributo title 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 title termina con ''banana''.

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

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

Answer 4

Puede usar :text Selector de :text 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''
});
});

:text es una extensión de jQuery y no es parte de la especificación de CSS; las consultas que usan: text no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para obtener un mejor rendimiento en los navegadores modernos, use [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

Puedes usar el selector de atributos aquí:

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

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

entrada [tipo = texto]

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

Answer 9

input[type=text]

o, para restringir a entradas de texto dentro de formularios

form input[type=text]

o, para restringir más a una determinada forma, asumiendo que tiene id myForm

#myForm input[type=text]

Aviso: IE6 no lo admite, por lo tanto, 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 pueden seleccionarse con los selectores de atributo, se podría tratar de cubrir otros casos de marcado para los cuales se representan las 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 el tipo está definido, pero tiene un valor no válido y aún se vuelve a escribir = "texto". Para cubrir eso, podríamos usar seleccionar todas las entradas que no sean 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 solo es compatible a partir de IE9.