[HTML] Change text box color on click?

[kylejn]

Let's say I've got a text box. I want the background color of that box to change when a user clicks on that box to enter text. How would I code this? I think I need to use Javascript, but I'm not sure how.

Thanks!

EDIT: Clicks or tabs to the box. Basically whenever the focus is on the box.

Edited May 10, 2009 by kylejn

[ekw]

many ways you can do this with onfocus:

1) If you're using CSS, you can change the class of that box w/ javascript

document.getElementById(id).classname = "myCssClass"

2) Or you can do it with straight up javascript

document.getElementById(id).color="black"

where id is the id of the text box

or something of that flavor.

http://www.w3schools.com/HTMLDOM/met_doc_getelementbyid.asp

you can change a lot of things like value font, etc

[Sandor]

simple css code:

input:focus { background: #000; }

IE alterations required: http://htmldog.com/articles/suckerfish/focus/

[Barney T. Administrators]

Topic moved here

[C++]

  ekw said:

many ways you can do this with onfocus:

1) If you're using CSS, you can change the class of that box w/ javascript

document.getElementById(id).classname = "myCssClass"

2) Or you can do it with straight up javascript

document.getElementById(id).color="black"

where id is the id of the text box

or something of that flavor.

http://www.w3schools.com/HTMLDOM/met_doc_getelementbyid.asp

you can change a lot of things like value font, etc

Ironically enough, I think neither of your specific examples would work. It's document.getElementById('id').className, not .classname, and document.getElementById('id').style.color, not .color.

To the OP, I can't be bothered to test this code but I'm pretty sure it's all you need.

<input type="text" onfocus="this.style.backgroundColor = 'green';" onblur="this.style.backgroundColor = 'white';" id="foo" name="foo" value="bar" />

[primexx]

  technikal said:

simple css code:

input:focus { background: #000; }

IE alterations required: http://htmldog.com/articles/suckerfish/focus/

+1

why use JS when CSS would do?