Selector de CSS para <tipo de entrada = "?"


105

¿Hay alguna forma con CSS para apuntar a todas las entradas según 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 de que puedo configurar esto en javascript pero de nuevo buscando CSS.

Me dirijo a IE7 +. Entonces no creo que pueda usar CSS3.

Editar

Con CSS3 podría hacer algo como?

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

Editar

¡De acuerdo, gracias por la ayuda! Entonces, aquí hay un selector que modifica todos los cuadros de texto y áreas que se han deshabilitado sin requerir la configuración de ninguna clase, cuando comencé esta pregunta, nunca pensé que esto fuera posible ...

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

Esto funciona en IE7


2
He escrito un artículo con información detallada sobre los selectores de atributos CSS.
Sarfraz

Respuestas:


155

Si. IE7 + admite 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; }

Lo <p><span/><span/></p>que efectivamente te daría:

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

Más información: compatibilidad con 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 están aquí desde hace algún tiempo. Supongo que es hora de que limpiemos nuestros archivos .css.


Ok, había intentado esto pero no funcionó ahora está funcionando, así que debo tener mi sintaxis estropeada.
JoshBerke

¡Usted acaba de hacer mi día! Ahora, si quieres hacer mi semana, dime que se puede hacer en IE6 sin usar Expressions jeje :-) j / k allí
JoshBerke

13
Desafortunadamente, no puede. Dejé de apoyar a IE6 por motivos religiosos y sugiero que todos lo hagamos también. Hoy utilizo el comentario condicional de IE para decirles a los usuarios que su computadora y privacidad están en riesgo por usar IE6 y que deben actualizar de inmediato: P
Filip Dupanović

1
Supongo que estoy tan acostumbrado a admitir IE6 que asumí que tampoco funcionaría en IE7
TJ L

4
Desearía poder dejar de admitir IE6, pero no puedo y no puedo hacer lo que sugieres ... Pero realmente, realmente, realmente desearía poder ;-)
JoshBerke

3

Lamentablemente los otros carteles son correctos que eres ... en realidad con las correcciones de Kron, que están bien con su IE7 y un médico 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 el soporte suficiente de los navegadores IE ^ h ^ h.

Por completo, el selector de tipo es, similar a xpath, del formulario, [attribute=value]pero existen muchas variantes interesantes. Se va a ser muy potente cuando esté disponible, una buena cosa a tener en su cabeza para IE8.


¿Tiene una referencia de soporte de navegador más actualizada? Que se basa en IE7 beta me encantaría ver IE8
JoshBerke

IE8 todavía está en beta, pero quirksmode dice "sí": quirksmode.org/css/contents.html
annakata

Todavía soy compatible con IE6, pero no con este pequeño ajuste visual añadido.
JoshBerke

bastante bien, fue mi error responder basándome en el título, tiendo a responder casos generales; realmente debería leer más preguntas :)
annakata

1

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


0

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

Qué lástima, lo sé, porque sería increíblemente útil.

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


jquery es la forma de hacer esto, o simplemente JavaScript en general
TravisO

4
De hecho, esta respuesta es incorrecta (la parte CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors . Si no es así, aclare su respuesta.
cic

1
Lo siento, tienes toda la razón. Solo espero lo menos de IE7 porque a menudo se requiere que los desarrolladores admitan IE6 al mismo tiempo. Debería haber leído la pregunta con más atención y hacer mi tarea.
Phil.Wheeler
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.