Selector de CSS para


¿Hay alguna manera con CSS de apuntar a todas las entradas basadas en su tipo? Tengo una clase deshabilitada que uso en varios elementos de formulario deshabilitados, y estoy configurando el color de fondo para los cuadros de texto, pero no quiero que mis casillas de verificación obtengan ese color.

Sé que puedo hacer esto con clases separadas, pero prefiero usar CSS si es posible. Estoy seguro, puedo establecer esto en javascript, pero de nuevo buscando CSS.

Estoy apuntando a IE7+. Así que no creo que pueda usar CSS3.

Editar

Con CSS3 sería capaz de hacer algo como?

INPUT[type='text']:disabled eso sería incluso mejor deshacerse de mi clase por completo...

Editar

Ok Gracias por la ayuda! Así que aquí hay un selector que modifica todos los cuadros de texto y áreas que se han desactivado sin necesidad de configurar ninguna clase, cuando empecé esta pregunta nunca pensé que esto fuera posible...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Esto funciona en IE7

Author: Linus Caldwell, 2009-01-22

4 answers

Sí. IE7 + soporta selectores de atributos:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Entrada de elemento con tipo de atributo que contiene un valor que es igual a, comienza con, contiene o termina con un cierto valor.

Otros selectores seguros (IE7+) son:

  • Padre > hijo que tiene: p > span { font-weight: bold; }
  • Precedido por ~ elemento que es: span ~ span { color: blue; }

Que para <p><span/><span/></p> te daría efectivamente:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Más información: Compatibilidad CSS del navegador en quirksmode.com

Me sorprende que todos los demás piensen que no se puede hacer. Los selectores de atributos CSS ya han estado aquí por algún tiempo. Supongo que es hora de limpiar nuestro .archivos css.

 149
Author: Filip Dupanović,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-09 00:13:10

Tristemente los otros carteles son correctos que eres ...en realidad, según lo corregido por kRON, usted está bien con su IE7 y un documento estricto, pero la mayoría de nosotros con los requisitos de IE6 se reducen a JS o referencias de clase para esto, pero es una propiedad CSS2, solo una sin soporte suficiente de IE^h^h navegadores.

Fuera de lo completo, el selector de tipos es - similar a xpath - de la forma [attribute=value] pero existen muchas variantes interesantes. será bastante potente cuando está disponible, lo bueno es mantenerlo en su cabeza para IE8.

 3
Author: annakata,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-22 21:39:02

Puede hacer esto con jQuery. Usando sus selectores, puede seleccionar por atributos, como tipo. Sin embargo, esto requiere que los usuarios tengan activado Javascript y un archivo adicional para descargar, pero si funciona...

 1
Author: cdeszaq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-22 20:47:33

Lo sentimos, la respuesta corta es no. CSS (2.1) solo marcará los elementos de un DOM, no sus atributos. Tendrías que aplicar una clase específica a cada entrada.

Bummer Lo sé, porque eso sería increíblemente útil.

Sé que has dicho que preferirías CSS sobre JavaScript, pero aún deberías considerar usar jQuery. Proporciona una forma muy limpia y elegante de agregar estilos a los elementos DOM basados en atributos.

 0
Author: Phil.Wheeler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-22 20:43:48