• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 134
  • Last Modified:

How to change the colour of a text box when clicked

Can anyone tell me how to change the colour of a text box on a form, when it is clicked.  I am not sure if I needed to post this in the javascript area, or if it can be done in CSS which I would prefer.  

thank you

Debbie
0
debbieau1
Asked:
debbieau1
  • 4
  • 3
1 Solution
 
GrandSchtroumpfCommented:
It cannot be done using CSS only.

<div onclick="this.style.color='red'">
hello world
</div>
0
 
debbieau1Author Commented:
Hi thanks for your quick response.

The hello world example worked great but I couldnt' get it to work on my text box.  I would be grateful if you could give me a little more help if you don't mind.

thank you very much

Debbie
0
 
GrandSchtroumpfCommented:
> I couldnt' get it to work on my text box.
What's a text box?  You mean a form element of type text? or a textarea?

<input type="text" value="hello world" onclick="this.style.color='red'"><br>
<textarea onclick="this.style.color='red'">hello world</textarea>

Please post your code if this does not solve your problem.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
debbieau1Author Commented:
sorry, here is my code (I have increased the points, which I hope makes up for the extra effort you are giving.

<input name="glossarybox" type="text" id="glossarybox" size="25">

I would like the background  or border to change colour when the tick box is clicked.  I have a css style applied to the default input box.

thank you for all your help

Debbie
 
0
 
GrandSchtroumpfCommented:
Actually, you probably want the style to change based on focus, not on click:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
input.ClickedBox {
  color: blue;
  background-color: yellow;
  border-color: lime;
}
</style>
</head>
<body>

<input name="glossarybox" type="text" id="glossarybox" size="25" onfocus="this.className='ClickedBox'" onblur="this.className=''">

</body>
</html>
0
 
debbieau1Author Commented:
Exactly what I needed.  Thank you so much!!

Debbie
0
 
GrandSchtroumpfCommented:
<:°)
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now