Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide
Bytes > Forums - Questions and Answers > Javascript / DHTML / Ajax Forum

changing a textarea's bgcolor

Question posted by: Markus (Moderator) on May 18th, 2008 04:27 PM
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's Avatar
Atli
Moderator
2,475 Posts
May 18th, 2008
05:34 PM
#2

Re: changing a textarea's bgcolor
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.

Quote:
Edit. I posted this in the wrong darn forum!

I'll move it over to the JavaScript forums.
Reply
Atli's Avatar
Atli
Moderator
2,475 Posts
May 18th, 2008
05:42 PM
#3

Re: changing a textarea's bgcolor
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. }

Doesn't work in IE tho :(
(Grrr @ M$)
Reply
hsriat's Avatar
hsriat
Expert
1,466 Posts
May 18th, 2008
05:52 PM
#4

Re: changing a textarea's bgcolor
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 :)
Reply
Velhari's Avatar
Velhari
Member
46 Posts
May 19th, 2008
12:28 PM
#5

Re: changing a textarea's bgcolor
Quote:
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. }

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


Hi,

This code is working in IE on Strict Mode.
Reply
hsriat's Avatar
hsriat
Expert
1,466 Posts
May 19th, 2008
12:35 PM
#6

Re: changing a textarea's bgcolor
Quote:
Hi,

This code is working in IE on Strict Mode.


Strict Mode.. .... Strict Doctype?
Reply
acoder's Avatar
acoder
Site Moderator
11,501 Posts
May 20th, 2008
10:13 AM
#7

Re: changing a textarea's bgcolor
Quote:
Hi,

This code is working in IE on Strict Mode.

I guess that would be IE7.
Reply
acoder's Avatar
acoder
Site Moderator
11,501 Posts
May 20th, 2008
11:01 AM
#8

Re: changing a textarea's bgcolor
Quote:
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).
Reply
Markus's Avatar
Markus
Moderator
2,169 Posts
May 21st, 2008
05:50 PM
#9

Re: changing a textarea's bgcolor
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.

:)
Reply
Reply
Not the answer you were looking for? Post your question . . .
189,075 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
Top Javascript / DHTML / Ajax Forum Contributors
Quick Browse:
Communities / Archives
XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

About Bytes | Sitemap | Privacy Policy | Terms of Use
Copyright 1995-2008 Bytes.com. All rights Reserved