Foros del Web » Creando para Internet » CSS »

como cambiar color a texto en input disabled?

Estas en el tema de como cambiar color a texto en input disabled? en el foro de CSS en Foros del Web. hola como le puedo cambiar el color gris,a traves de un css a un texto que esta dentro de un input con la propiedad disabled ...
  #1 (permalink)  
Antiguo 01/05/2006, 23:25
 
Fecha de Ingreso: febrero-2006
Mensajes: 446
Antigüedad: 11 años, 9 meses
Puntos: 3
como cambiar color a texto en input disabled?

hola
como le puedo cambiar el color gris,a traves de un css a un texto que esta dentro de un input con la propiedad disabled

gracias

este es al texto gris que me refiero
  #2 (permalink)  
Antiguo 01/05/2006, 23:54
Avatar de Mickel  
Fecha de Ingreso: mayo-2002
Ubicación: Lima, Peru
Mensajes: 4.619
Antigüedad: 15 años, 6 meses
Puntos: 7
el style es color:(color)
__________________
No tengo firma ahora... :(
  #3 (permalink)  
Antiguo 01/05/2006, 23:57
 
Fecha de Ingreso: febrero-2006
Mensajes: 446
Antigüedad: 11 años, 9 meses
Puntos: 3
Cita:
Iniciado por Mickel
el style es color:(color)
gracias,pero como lo incluyo en el css,me refiero al formato,que debo darle
  #4 (permalink)  
Antiguo 02/05/2006, 00:04
 
Fecha de Ingreso: febrero-2006
Mensajes: 446
Antigüedad: 11 años, 9 meses
Puntos: 3
este es mi css,pero no me cambia el color,en las cajas texto que estan disabled,y agregue el style color

Código:
input, textarea, select
{

 color:#202020;
 border: 1px solid #006699;
}


P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}

BODY {
background-color :#ffffff;
font-family : arial;
color : White;
}


input { font-family: Tahoma, Verdana, Arial; font-size:
11px; color: #FFFFFF; background-color: #6699CC; border:#000099;
border-style: solid; border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px}
select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF;
 background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px;
 border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
  #5 (permalink)  
Antiguo 02/05/2006, 13:49
 
Fecha de Ingreso: febrero-2006
Mensajes: 446
Antigüedad: 11 años, 9 meses
Puntos: 3
que le debo modificar a mi css,para que cambie el color gris de los input,que estan con propiedad disabled.

gracias
  #6 (permalink)  
Antiguo 02/05/2006, 18:42
 
Fecha de Ingreso: febrero-2006
Mensajes: 446
Antigüedad: 11 años, 9 meses
Puntos: 3
ayudaa
gracias
  #7 (permalink)  
Antiguo 04/05/2006, 15:42
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
No lo puedes cambiar. El "deshabilitado" es un color de sistema y lo define cada usuario para su máquina . El tuyo puede ser gris, el de otro será beige, o bordó, o ...
  #8 (permalink)  
Antiguo 28/06/2006, 16:52
 
Fecha de Ingreso: abril-2004
Mensajes: 154
Antigüedad: 13 años, 7 meses
Puntos: 0
ESTAN SEGUROS DE QUE NO HAY MANERA DE DARLE PROPIEDAD DE COLOR CUANDO ESTA DISABLED????? a mi me funciona perfectamente en Firefox pero en IE me la pone gris. Algo tiene que existir para esto.

MALDITO SEA IE
__________________
Desdichado quien duerme en la mañana
  #9 (permalink)  
Antiguo 10/08/2006, 18:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Cita:
Iniciado por sofway
... a mi me funciona perfectamente en Firefox pero en IE me la pone gris ...
Buen punto. Supongo que -thor- se está refiriendo a la combinación Windows / IExplorer . No recuerdo cómo hace Firefox para mostrar texto deshabilitado; es posible que utilice algún otro formato que no modifique el color (tachado, borroso, semitransparente, puntero not-allowed )y por lo tanto éste se siga viendo igual, pero eso no explica cómo se le cambia el color a un texto cuando se lo deshabilita y, encima,con CSS.

Podrías aprovechar el tema para mostrarnos cómo lo hiciste. Aunque sea sólo para FF.

Mientras tanto, voy a ampliar un poco el mensaje que puse más arriba.
Allí dije que los colores de sistema no se pueden cambiar; y no es totalmente cierto.
Al instalar un sistema operativo (p.e.Windows ), se instala también un color predeterminado para cada elemento; que más tarde todos cambiamos usando la herramienta de configuración de pantalla o algún "tema". Estos programas sí pueden cambiar los colores de sistema, pero hasta ahora lo decide el usuario.

Existen aplicaciones que tienen su propio skin o tema, pero no modifican al del s.o., sólo lo ignoran y este formato se ve unicamente en el programa que lo instaló.
Sin embargo, en las aplicaciones que muestran documentos, estos últimos también pueden ser alcanzados por ese formato; pero sólo como default .
Un ejemplo: quien usa XP/ie6 tiene la posibilidad de ver los botones de una página con las esquinas redondeadas y con un fondo degradado, si no estuviera puesto un "tema" el color de fondo sería buttonface ; y en ambos casos un diseñador puede usar CSS para aplicar al elemento su background-color que va a reemplazar al estilo por omisión ( theme, Skin o System Color ).

Y de este punto salió mi apresurado " no se puede " en vez de un más juicioso "no se debería".
Existen algunos formatos 'críticos' como los colores de texto seleccionado o deshabilitado que una vez configurados por el usuario le sirven para conocer una situación en su documento, más allá de los caprichos del diseñador. Por oro lado, el CSS se aplica a elementos; quiero decir, que le podemos dar color a un input pero no a un disabled , porque es un atributo del elemento y no un elemeno en sí mismo.
Y aquí cabe una observación: en CSS ya existe algo llamado "seudoelemento" (: hover;:firs-line) que apuntan a una circunstancia de un elemento. Con la misma lógica se podrían inventar ":selected " o ": disabled "; pero hasta el momento no sé de ningún navegador que los haya implementado.

En este párrafo es donde debería comenzar una discusión sobre si es lícito que una hoja de estilos alcance a un formato que en realidad es una herramienta para el usuario; y aún así, si los diseñadores deberían usarlo. También si es buen negocio instalar en nuestras máquinas un skin capaz de modificar los documentos además de las aplicaciones. (Aunque se pueda deshabilitar).
Pero vamos a ahorranos el mal momento pasando ya a las consideraciones finales.

No tengo idea de cómo estás usando el input , -thor- , en algunos casos sirve el truco de reemplazar el disabled con alguna combinación de eventos y/o atributos
readonly = "readonly"
tabindex = -1
unselectable ="on"
onfocus = "this.blur()"
prueba con uno o varios.
En el tema Todo sobre colores. #25 puse una tabla con los colores de sistema. Es para Internet Explorer 5.x . Además en CSS 2.1 ó 3 se cambiaron algunos nombres y hay que tenerlo en cuenta.
En ese mismo tema caricatos puso un enlace a una herramienta HTM bastante más completa para manejar colores que sí debe andar en FF.
Y por último,no es necesario gritar sofway, ¡si hablando nos entendemos lo mismo!

Saludos
furoya.
  #10 (permalink)  
Antiguo 18/08/2006, 05:45
Avatar de Kamarada_Malkav  
Fecha de Ingreso: octubre-2005
Ubicación: Madrid
Mensajes: 70
Antigüedad: 12 años, 1 mes
Puntos: 0
Saludos a todos!

Me voy a estrenar en mis post contando mi experiencia con el tema.

Yo quería hacer algo parecido a lo que se expone aquí, es decir, poner un campo input como disabled y que automaticamente se le asignara un estilo css. Esto se puede hacer de una manera sencilla:
Código:
input:disabled{
color:#202020;
border: 1px solid #006699;
}
Pero el problema es que sólo funciona con FireFox. Pues bien, comencé a estrujarme los sesos para conseguir alguna forma de hacerlo y me fijé en el script que utilizaba para poner los input en disabled segun el valor de otro campo del formulario, tenía algo así:
Código:
document.formulario.Nombre.disabled = true;
Pensé que si podía cambiar esa propiedad también prodria cambiar la clase del input... así que cree en lugar de una sola clase para el input, dos, de esta manera:
Código:
input.enabled{
color:#CCCCCC;
border: 1px solid #000000;
}

input.disabled{
color:#202020;
border: 1px solid #006699;
}
Y de esta manera cambiaba la clase según me convenía:
Código:
document.formulario.Nombre.className = "disabled";
Se que es una manera un poco liosa y "cutre" por decirlo de alguna manera, pero yo necesitaba hacerlo y así lo conseguí, y como alguien puede tener esta misma necesidad pues aquí lo expongo y espero que os ayuden mis horas de estrujamiento de sesos.

Saludos.
  #11 (permalink)  
Antiguo 18/08/2006, 10:33
 
Fecha de Ingreso: abril-2004
Mensajes: 154
Antigüedad: 13 años, 7 meses
Puntos: 0
Kamarada_Malkav: FELICITACIONES¡¡ por tan maravillosa solución, en mi opinión es bastante limpia. Te voy a mostrar como lo solucioné yo.
Código:
<script>
	function DisableEnableForm(xForm){
		objElems = xForm.elements;
		for(i=0;i<objElems.length;i++){
			if(objElems[i].type == "checkbox"){
				continue;
			}
			if(objElems[i].type == "radio"){
				objElems[i].disabled = true;
				continue;
			}
			objElems[i].readOnly = true;
			objElems[i].style.backgroundColor="#FFFFFF"; 
		}
	}
	
	function block_checkbox(control){
			if(control.checked){
				control.checked=false;
			}else{
				control.checked=true;
			}
	}
</script>
EXPLICACIÓN:
con la primera función, recorro todos los elementos del formulario. Si el elemento es un checkbox continuo porque la propiedad disabled en este control lo hace ver muy mal; si es radio si se la puedo aplicar, y el resto de elementos les aplico readonly, que es una propiedad que bloquea el input permitiendo agregarle un CSS que es lo que no nos permite el IE. Con la segunda función lo que hago es que cuando se de click a un checkbox, automaticamente se vuelve a clickear obteniendo el mismo resultado en el que estaba. Este último no es que sea muy brillante, pero funciona a la perfección.

Saludos
__________________
Desdichado quien duerme en la mañana
  #12 (permalink)  
Antiguo 02/06/2007, 21:34
Avatar de DinamiteDog  
Fecha de Ingreso: febrero-2005
Ubicación: Rosario, Argentina
Mensajes: 77
Antigüedad: 12 años, 10 meses
Puntos: 4
Re: como cambiar color a texto en input disabled?

Es facil...ejemplo:

Código:
input:disabled
{
	background-color   : #1A2740;
}
Saludos,

Facundo.

PD: Lo revivi porque es muy interesante y mucha gente lo puede llegar a buscar y/o interesarle =D.

Última edición por DinamiteDog; 02/06/2007 a las 21:44
  #13 (permalink)  
Antiguo 03/06/2007, 03:40
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: como cambiar color a texto en input disabled?

Hola a todos.

Se agradece tu código DinamiteDog, yo no lo conocía, pero hay que advertir que no funciona en IE ni en Opera.

Saludos,
  #14 (permalink)  
Antiguo 05/06/2007, 13:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: como cambiar color a texto en input disabled?

Leyendo este tema siento un déjà vu du déjà vu.
Incluyendo a mi propia respuesta #9, claro, ( que -dicho sea de paso- es la única que sirve ) y su lista de métodos archiconocidos y re-vistos para simular un disabled en IE.
  #15 (permalink)  
Antiguo 30/10/2012, 04:39
Avatar de veruti85  
Fecha de Ingreso: octubre-2012
Ubicación: Entre Huelva y Madrid
Mensajes: 32
Antigüedad: 5 años, 1 mes
Puntos: 7
Respuesta: como cambiar color a texto en input disabled?

Esto lleva mucho tiempo inactivo, pero bueno, aprovechando que lo que tengo me funciona, os lo dejo aqui por si alguien lo vuelve a leer

el :disabled como bien deciis no funciona en explorer, pero si funciona si le decimos que el input tiene el atributo disabled de esta forma

input[disabled]{background-color: #888;}

Espero haber ayudado con mi primer post :)
  #16 (permalink)  
Antiguo 01/11/2012, 12:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: como cambiar color a texto en input disabled?

Sí, es un tema viejo. Y lleno de post que regaban fuera del cantero (ahora que lo miro de nuevo, me doy cuenta la paciencia que tenía yo en otras épocas). Hoy la mayoría de los engendros aquí inventados fueron superados.

Y se supone que la pseudoclase :disabled no sólo ya existe, sino que anda en IE9.
Lo que estás usando es un 'selector de atributos' CSS, que busca la expresión encerrada entre corchetes dentro de los atributos y valores del selector que tenga adelante.
Es una buena opción para alguna versión anterior a IExplorer 9.

Lo que aún no invalida son mis dudas y objeciones anteriores. No estoy seguro si debemos modificar el formato disabled.
  #17 (permalink)  
Antiguo 18/12/2012, 14:54
 
Fecha de Ingreso: diciembre-2012
Ubicación: caracas
Mensajes: 1
Antigüedad: 5 años
Puntos: 0
Respuesta: como cambiar color a texto en input disabled?

Se que tiene full tiempo este post pero la solución mas simple a este problema es agregar en el css que le vas a asignar al input.

opacity: 1 !important;

ya que por defecto es: opacity: .3; mientras mas alto el numero mas oscuro sera. a esto le puedes agregar el color: black; para que sea negro o red, blue.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.