Form bordercolor change OnFocus 1

[maharg]

Hi folks

I have a complex form with many fields and want to change the border color of the focussed field to red, so people know where they are at at any time.

I tried

<input type="text" size="30" maxlength="50" name="FamilyName"  class="form" onfocus="this.style.border-color:'#f00';" onblur="this.style.border-color:'#000';" value="" />

My main linked css for .form is ...

.form {background-color: #fff; font-size: 10px;
border: 1px solid #000000;
font-family: verdana,helvetica,arial,sans-serif;
color: rgb(090,090,120);
border-color: rgb(000,000,000);
scrollbar-face-color:rgb(157,185,200); 
scrollbar-shadow-color:rgb(85,128,151);
scrollbar-highlight-color:rgb(206,220,227); 
scrollbar-3dlight-color:rgb(206,220,227);
scrollbar-darkshadow-color:rgb(0,0,0); 
scrollbar-track-color:rgb(206,220,227);
scrollbar-arrow-color:rgb(0,0,0)}

But no joy. I've tried various ways of declaring the color.
Any idea what I'm doing wrong?

 

[BillyRayPreachersSon]

Yes - your syntax is slightly off. Use:

<input type="text" size="30" maxlength="50" name="FamilyName" class="form" onfocus="this.style.borderColor='#f00';" onblur="this.style.borderColor='#000';" value="" />

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[maharg]

Great Dan

Many thanks. I've been tearing my hair out over that!

How come borderColor and not border-color like in the css?

Cheers,

Graham

 

[BillyRayPreachersSon]

Because JavaScript is not CSS ;o)

Basically, to convert a CSS property to its scripting equivalent, capitalise every letter after a "-", and then remove the "-"... so "border-color" becomes "borderColor". You then use JavaScript syntax to set the value, not CSS syntax ( prop:value becomes prop='value').

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[maharg]

Aha,

Thanks Dan,
That explains a few other 'failures' !!

Much appreciated.

Graham

 

[ChrisHunt]

You could try removing the javascript altogether and try adding this to your css:

input.form:focus,
input.form:active { border-color: #f00; }

It may not work in IE though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd