Cómo definir formato de disable y focus para input con css?

mape367 · #1 (**permalink**) 28/01/2008, 14:18

Buenas

Amigos, tengo una duda, quiero que al aplicar disabled=true con javascript a varios objetos de un formulario, éstos tomen unas propiedades indicadas en una sub-clase css :disable. Luego cuando vuelve a disable=false, el objeto en cuestión vuelva a sus propiedades iniciales. Lo mismo con :focus...

Encontre el siguiente ejemplo en WebEstilo que es exactamente lo que quiero, pero sólo funciona en firefox, no pasa nada con IE.

Código HTML:

<html> 
Otra forma mas sencilla y fiable 
<input type='text' class='text' value='un texto de muestra habilitado'> 

<input type='text' class='text' value='un texto de muestra deshabilitado' disabled> 
<style type='text/css'> 

/*El objeto habilitado*/ 
INPUT.text { 
border: 1px solid; 
background:white; 
color:black; 
} 
/*El objeto con el foco color amarillo*/ 
.text:focus {background: yellow; } 

/*El objeto deshabilitado color rojo*/ 
.text:disabled {background: red; } 

</style> 
</html>

Como puedo hacer para que la funcionalidad que les comenté funcione en ambos navegadores?

Desde ya muchas gracias

Saludos

#2 (**permalink**) 28/01/2008, 16:36

El problema es que estás usando una pseudoclase que pertenece a CSS3.

En tu lugar probaría con un selector de CSS2

input[disabled="disabled"]

pero tampoco funcionaría con el IE...

Por ahora, si querés que funcione en todos los navegadores, vas a tener que armar una clase extra en el css y asignársela al elemento con JS en el momento en el que lo deshabilitás.

Saludos.

DragonX · #3 (**permalink**) 28/01/2008, 16:41

en resumen......dejalo habilitado

mape367 · #4 (**permalink**) 29/01/2008, 05:52

Gracias por las respuestas.

Lo voy a implementar con css sólo para FF. El disable no es tan importante para IE ya que al deshabilitar el elemento ya se puede distinguir bien, pero en FF, al tener un boton con imagen de fondo no se nota diferencia entre uno habilitado y uno deshabilitado.

Me interesaba más el tema del focus, ya que actualmente tengo implementado un comportamiento similar pero activado por JS en los eventos onFocus y onBlur.

Soportará IE algún día CSS3?

Desde ya gracias,

Saludos