ansaurus

Question

How do I change the backcolor of a textbox when user clicks into it with CSS

Answer 1

+4 A:

You can use CSS pseudo-class selectors like this:

textarea:focus { background-color: red }

Note that this doesn't work IE7 and lower.

Otto Allmendinger 2010-02-27 21:03:52

And my vote goes to Otto, for being first by 2 minutes :-) But I would like to add that `:focus` isn't supported by IE7 or lower (i know!). For IE7 and IE6 you will need to use the DOM events `onfocus`/`onblur`.

Andy E 2010-02-27 21:22:23

The question says "textbox", though.

Phoexo 2010-02-27 21:23:23

@Phoexo: You're arguing semantics, Otto's answer is still correct. A textarea is a multi-line text box. An input with `type="text"` is a single-line text box.

Andy E 2010-02-27 21:26:44

@Andy: thanks for the info, edited my answer

Otto Allmendinger 2010-02-27 21:31:25

Answer 2

+4 A:

Demonstration :)

textarea:focus
{
   background-color: #00ff00;
}

Sarfraz 2010-02-27 21:05:59

Answer 3

+3 A:

input[type='text']:focus {  
    background-color: #0066FF;  
}

Phoexo 2010-02-27 21:08:36

does this work on ie6, 7 ?

ooo 2010-02-27 21:30:15

Definitely not IE6. Possibly IE7, but I doubt it.

Dan Herbert 2010-02-27 21:31:57

@oo: As I mentioned in my comment on Otto's answer, this only works on IE8 in standards mode, it will not work in IE8 compatibility mode, IE7 or lower. The workaround is to use javascript.

Andy E 2010-02-27 21:39:15

ansaurus

tags:

views:

answers:

How do I change the backcolor of a textbox when user clicks into it with CSS

related questions