• 0

[HTML] Change text box color on click?


Question

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 by kylejn
Link to comment
https://www.neowin.net/forum/topic/770264-html-change-text-box-color-on-click/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

  • 0
  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" />

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I always just assumed that how I start programs is pretty close to how most people do it, which is... 1)Either start a program from desktop icon. or... 2)Windows key (or mouse click on start menu) and when start menu appears type in a little of what program you are trying to find, it will highlight, then press enter (or find it with mouse pointer and click it) is the very basic idea. this is very basic core functionality I would never change since it's quick and to the point and just works and has been this way a long time now. NOTE: I am on Linux Mint 22.1-Xfce, but the very basics like this are the same as Windows in this regard. I like how Mint tends to pretty much stay the same (minor tweaks from point release to point release that are slight but overall it's pretty much the same) instead of change for the sake of change like Windows does and ends up making some stuff potentially worse as a result. I say screw all of those trends where something has to 'look current' as I am more of the mindset once something looks good enough, which Mint does, you pretty don't screw with it as if someone does want to mess with it, they can do their own custom tweaks but the base install should be like that 'old faithful' type of interface that everyone has been familiar with for decades now. so by that standard the 'Start Menu' is still useful. I would NEVER get rid of that core functionality as Win8 pretty much tried that upon release and it made doing VERY basic stuff a chore which is why after I briefly tried Win8 in a VM, I never bothered with that OS again as that was easily Microsoft's biggest mess up with interface changes and I have been using Windows since v3.11 in mid-1990's and that Win8 interface change was by far the biggest mess up from Microsoft (how that made it to the final product is beyond me). I realize they supposedly fixed it in Win 8.1, but by then no one really cared as Win7 was the standard and those moving on from that went to Win10.
    • i click a few things on the start menu, other wise I do still use the run box daily.
    • That article title has a typo, it's supposed to say "Do I even need it?" And... I would not have wasted time writing a full article on a software [or feature] analysis based on exactly 1 user experience.
    • Lots of people use it without having an angsty Gotterdammerung.
    • Why certain models only? It should be provided on all high end phones.
  • Recent Achievements

    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      679
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      207
    4. 4
      +FloatingFatMan
      171
    5. 5
      Steven P.
      148
  • Tell a friend

    Love Neowin? Tell a friend!