Cambiar color a resultado en en una caja de texto

oscarbt · #1 (**permalink**) 08/10/2010, 16:24

Buenas, la verdad muy poco trabajo CSS, pero me gustaria saber como puedo hacer esto:
Tengo un formularo donde el usuario me ingresa el valor del lado de un cuadrado y en dos cajas te texto que estan deshabilidatas (disable), imprimo los resultados
Pero resulta que los resultados me salen en color negro y muy claritos,

Como puedo cambiar el color de esos resultados?.....O dejarlos mas oscuros?? eso se hace con CSS?...

Aca el codigo de mi formulario:

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cuadrado</title>
<script languaje="JavaScript">
 
function num(c){
 c.value=c.value.replace(/[A-z-\/\*\+]/, '');
}
 
</script>
      
 
 
<script languaje="JavaScript">
          function area()
         {
            lado=document.datos.lado.value;
    
                         document.datos.perimetro.value=lado*4;
             document.datos.resultado.value=lado*lado;
          
         }  
      </script>
<style type="text/css">
<!--
.Estilo1 {color: #0000FF}
-->
</style>
</head>
 
<body>
<br>
<center><h1><b>CALCULO DE AREA DE UN CUADRADO</b></h1></center>
<br />
<hr />
 
<br>
<br>
 
 
<form name="datos">
<center>
<table width="500
" border="1" >
  <tr>
    <td width="147"><div align="center"><strong><h2 class="Estilo1">INGRESO DE DATOS</h2>
    </strong></div></td>
    <td width="173"><div align="center">
      <h2><strong><span class="Estilo1">RESULTADO</span></strong></h2>
    </div></td>
    <td width="173"><div align="center">
      <h2><strong><span class="Estilo1">FIGURA</span></strong></h2>
    </div></td>
  </tr>
  <tr>
    <td><div align="center"><h3>VALOR DEL LADO </h3>
<input  type="text" name="lado" size="10" onBlur="num(this);" onKeyPress="num(this);" onKeyUp="num(this);" /></div></td>
    <td><div align="center">
<h3>VALOR PERIMETRO </h3>
<input type="text" name="perimetro" disabled="disabled">
 
  <h3>VALOR AREA </h3>
<input type="text" name="resultado" disabled="disabled"></div><br></td>
<td><div align="center">
<h3><img src="Imagenes/cuadrado.jpg" alt="Cuadrado" > &nbsp;</h3>
</div>
<br></td>
  </tr>
</table>
</center>
 
  
 
  <br>
   
   <CENTER> <input type="button" value="Calcular valores" onClick="area()"> <input name="Limpiar"  type="reset" id="Limpiar" value="Borrar valores ingresados "></CENTER>
</form>
<br />
 
</body>
 </html>

Agradezco me puedan colaborar

TEPO · #2 (**permalink**) 08/10/2010, 16:59

Bueno, enprincipio el script de tu pagina, al menos el que pasaste no muestra los resultados, pero bueno, fijate si cambiando el color de los input se ve algo:

<h3>VALOR PERIMETRO </h3>
61.
<input type="text" name="perimetro" disabled="disabled" style="background-color:#FFFFFF";>
62.

63.
<h3>VALOR AREA </h3>
64.
<input type="text" name="resultado" disabled="disabled" style="background-color:#FFFFFF";></div><br></td>

De todas maneras me parece que ha tu script le falta algo, para que muestre los resultados, creo que esto no te va a servir de mucha ayuda.
Saludos.-

oscarbt · #3 (**permalink**) 08/10/2010, 17:41

Gracias, lo que pasa es que no lo copie entero, que pena

oscarbt · #4 (**permalink**) 08/10/2010, 17:43

Pero asi no funciono, solo deja la caja de texto sin color....lo que yo quiero es cambiar el color del texto...

carmagedon · #5 (**permalink**) 08/10/2010, 19:02

Hola,

Para cambiar los estilos al texto, inputs, etc., etc., en el input que está disabled que es donde supuestamente se muestran los resultados, será cuestión de que hagas lo que te acabaron de comentar.
Es raro que aparezcan de otro color, si vos no lo estás modificando.

Por ahí te aconsejaría en que uses en un archivo aparte, un css para todos tus estilos, obviamente a éste archivo lo vas a tener que incluir, y entonces, en tu input lo que tendrías que hacer es cargarle el estilo que estás apuntando, por ejemplo.

Código HTML:

Ver original<input type='text' class='myinputclass'>

Código CSS:

Ver original.myinputclass{
position: absolute;
background-color: #FFFFFF;
color: #000000;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

Para hacerlo más fácil, prueba en un archivo a parte, éste código.
Obviamente tenés que especificar al código del CSS que son estilos, para eso investiga así aprendés a buscar y a resolver tus problemas solo, que es mucho mejor que copiar y pegar

. Solo te falta abrir una etiqueta para detectar que es código CSS.

Luego de encontrar la etiqueta para meter el codigo del CSS, prueba, a ver si te funciona. Y luego, haz lo mismo, pero adaptando tu código.

Saludos!!