Need to change color of text in a text box?

larry · December 24th, 2003, 01:54 PM

I am using the following to let my users know that the page is loading and they should wait for everything to load before going on.

<BODY bgcolor="#ffffff" onload="document.form1.text1.value='Loading complete, begin testing now... ';">
<center>

<center><form name="form1">
<input type="text" name="text1" size="32" value=" Data Loading, Please Wait . . ."/>
</form></center>

I would like to change the color of just the text 'Loading complete, begin testing now...' and 'Data Loading, Please Wait. . .'
How do I change it to red?

Thanks in advance for your help!
Larry

Imar · December 24th, 2003, 02:45 PM

Hi Larry,

You can use CSS and some JavaScript to accomplish that. First, set the waiting text color and background color using CSS. Then, from the onload tag, have some JavaScript change the colors again:

Code:

<html>
<head>
  <title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading 
  complete, begin testing now... ';
  document.form1.text1.style.backgroundColor = 'white';
  document.form1.text1.style.color = 'black';">
<center>
  <form name="form1">
    <input type="text" style="background-color:yellow;color: red;" 
       name="text1" size="32" value="Data Loading, Please Wait . . ."/>
  </form>
  </center>
</body>
</html>

(Note, all the stuff on the <body> tag should be on one line.

It may be easier to move the JavaScript to a separate function, so you're not cluttering up the <body> tag too much, but I'll leave that up to you.

The code in the onload event changes the color (of the text) and the background color properties of the style object. This style object belongs, in this example, to the text box.

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

larry · December 27th, 2003, 06:11 PM

Hi Imar,
Sorry I didn't get back to you until now to thank you for helping me with this text box color problem. What you posted was exactly what I needed :) Thanks alot!

One more thing on this same script, how would change the size of the height of the text box? I can change the width with the script I have, but how would I code it to also change the width?

Thanks again for all your help - Happy Holidays and an even better New Year!

Larry

---------------------------------------------

Quote:

quote:Originally posted by Imar
Hi Larry,

You can use CSS and some JavaScript to accomplish that. First, set the waiting text color and background color using CSS. Then, from the onload tag, have some JavaScript change the colors again:

Code:

<html>
<head>
  <title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading 
  complete, begin testing now... ';
  document.form1.text1.style.backgroundColor = 'white';
  document.form1.text1.style.color = 'black';">
<center>
  <form name="form1">
    <input type="text" style="background-color:yellow;color: red;" 
       name="text1" size="32" value="Data Loading, Please Wait . . ."/>
  </form>
  </center>
</body>
</html>

(Note, all the stuff on the <body> tag should be on one line.

It may be easier to move the JavaScript to a separate function, so you're not cluttering up the <body> tag too much, but I'll leave that up to you.

The code in the onload event changes the color (of the text) and the background color properties of the style object. This style object belongs, in this example, to the text box.

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Imar · December 28th, 2003, 09:04 AM

Well, it's almost the same as with the colors. Just set the relevant style (height, in this case) and use JavaScript to change it. Changes are in bold:

Code:

<html>
<head>
  <title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading 
  complete, begin testing now... ';
  document.form1.text1.style.backgroundColor = 'white';
  document.form1.text1.style.height = 200;  document.form1.text1.style.color = 'black';">
<center>
  <form name="form1">
    <input type="text" style="background-color:yellow;color: red;height: 30px;" 
       name="text1" size="32" value="Data Loading, Please Wait . . ."/>
  </form>
</center>
</body>
</html>

You too have a happy New Year!

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

larry · December 28th, 2003, 02:29 PM

Thanks again Imar,

With your help, everything is working just the way I wanted :D

Larry
---------------------------------------------

Quote:

quote:Originally posted by Imar
Well, it's almost the same as with the colors. Just set the relevant style (height, in this case) and use JavaScript to change it. Changes are in bold:

Code:

<html>

Code:

<head>
  <title>Test Colors</title>
</head>
<body bgcolor="#ffffff" onload="document.form1.text1.value='Loading 
  complete, begin testing now... ';
  document.form1.text1.style.backgroundColor = 'white';
  document.form1.text1.style.height = 200;  document.form1.text1.style.color = 'black';">
<center>
  <form name="form1">
    <input type="text" style="background-color:yellow;color: red;height: 30px;" 
       name="text1" size="32" value="Data Loading, Please Wait . . ."/>
  </form>
</center>
</body>
</html>

You too have a happy New Year!

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

surendran · December 29th, 2006, 02:07 AM

hi Imar,
I wanted to chage the colour of combo box, is it possible,
i try to use style, but it is changing background colur, i want to chage the arrow colour text colour,
waiting for your help

surendran
(Anything is Possible)
http://ssuren.spaces.msn.com

Imar · December 29th, 2006, 05:14 AM

Unfortunately, you can't.

This is something that is determined by the OS, not by the HTML / CSS in the browser.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.