changing a textarea's bgcolor

[Markus]

If you take a look at the textarea for commenting on this page you'll see my desire.

When hovering over the textarea the bgcolor changes, but once the textarea is clicked it maintains this new color until the area loses focus.

What's going on guys?

Edit. I posted this in the wrong darn forum!

[Atli]

You can use the onMouseOver, onMouseOut, onFocus and onBlur events to do this.
You will just have to create a JavaScript variable that indicates whether the input has focus. When it does, prevent the onMouseOut event from changing the color.

Edit. I posted this in the wrong darn forum!

I'll move it over to the JavaScript forums.

[Atli]

Or better yet... The CSS :hover and :focus effects

textarea {
    background-color: #FFFFFF;
}
textarea:hover, textarea:focus {
    background-color: #FFFFCC;
}
 

Doesn't work in IE tho :(
(Grrr @ M$)

[hsriat]

Well, its still in the wrong forum :p

Use this css

textarea.effect, input.effect {
    background-color:#eeeeff;
}
textarea.effect:hover, input.effect:hover,textarea.effect:focus, input.effect:focus {
    background-color:#ffeeee;
}

where effect is the class name of the textareas and input boxes to whom you want to apply this.


[EDIT].. I'm late.. already done by Atli :)

[Velhari]

Or better yet... The CSS :hover and :focus effects

textarea {
    background-color: #FFFFFF;
}
textarea:hover, textarea:focus {
    background-color: #FFFFCC;
}
 

Doesn't work in IE tho :(
(Grrr @ M$)

Hi,

This code is working in IE on Strict Mode.

[hsriat]

Hi,

This code is working in IE on Strict Mode.

Strict Mode.. .... Strict Doctype?

[acoder]

Hi,

This code is working in IE on Strict Mode.

I guess that would be IE7.

[acoder]

You can use the onMouseOver, onMouseOut, onFocus and onBlur events to do this.
You will just have to create a JavaScript variable that indicates whether the input has focus. When it does, prevent the onMouseOut event from changing the color.

CSS :hover pseudo-classes are not supported by IE7 unless a doctype is provided, so you will need to use JavaScript to achieve this (if you also need to support IE6).

[Markus]

Thanks for all the responses guys!

They all, at a glance, are what I'm looking for.

Wasn't a major thing, just a query.

:)

[Biggaz1979]

This CSS code worked fine for me too in Chrome :)