469,276 Members | 1,985 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,276 developers. It's quick & easy.

changing a textarea's bgcolor

Markus
6,050 Expert 4TB
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!
May 18 '08 #1
9 2688
Atli
5,058 Expert 4TB
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.
May 18 '08 #2
Atli
5,058 Expert 4TB
Or better yet... The CSS :hover and :focus effects
Expand|Select|Wrap|Line Numbers
  1. textarea {
  2.     background-color: #FFFFFF;
  3. }
  4. textarea:hover, textarea:focus {
  5.     background-color: #FFFFCC;
  6. }
  7.  
Doesn't work in IE tho :(
(Grrr @ M$)
May 18 '08 #3
hsriat
1,654 Expert 1GB
Well, its still in the wrong forum :p

Use this css

Expand|Select|Wrap|Line Numbers
  1. textarea.effect, input.effect {
  2.     background-color:#eeeeff;
  3. }
  4. textarea.effect:hover, input.effect:hover,textarea.effect:focus, input.effect:focus {
  5.     background-color:#ffeeee;
  6. }
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 :)
May 18 '08 #4
Velhari
46
Or better yet... The CSS :hover and :focus effects
Expand|Select|Wrap|Line Numbers
  1. textarea {
  2.     background-color: #FFFFFF;
  3. }
  4. textarea:hover, textarea:focus {
  5.     background-color: #FFFFCC;
  6. }
  7.  
Doesn't work in IE tho :(
(Grrr @ M$)
Hi,

This code is working in IE on Strict Mode.
May 19 '08 #5
hsriat
1,654 Expert 1GB
Hi,

This code is working in IE on Strict Mode.
Strict Mode.. .... Strict Doctype?
May 19 '08 #6
acoder
16,027 Expert Mod 8TB
Hi,

This code is working in IE on Strict Mode.
I guess that would be IE7.
May 20 '08 #7
acoder
16,027 Expert Mod 8TB
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).
May 20 '08 #8
Markus
6,050 Expert 4TB
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.

:)
May 21 '08 #9
This CSS code worked fine for me too in Chrome :)
Feb 16 '12 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by dan.vendel | last post: by
12 posts views Thread by GaryDean | last post: by
4 posts views Thread by Keith Bentrup | last post: by
reply views Thread by lawrenceS59 | last post: by
reply views Thread by lawrenceS59 | last post: by
15 posts views Thread by globalrev | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.