html - texto - selectores avanzados css




Selector de CSS para los campos de entrada de texto? (6)

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 .

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


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

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

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;
}

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


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.


entrada [tipo = texto]

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





html-input