HTML and CSS

Text box mouseover

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 58

Reputation: besktrap is an unknown quantity at this point

Solved Threads: 1

besktrap

Offline

Junior Poster in Training

Text box mouseover

Nov 30th, 2008

Hi y'all. I'm just starting to learn HTML and just had a few questions. I was using some tutorials from w3schools.com, and I came across Event Attributes. So I have this textbox, and I want it, when clicked, to clear the the text box of it's value, and change the text color to black (as in the actual text box, not the whole screen). Then when you click out of the text box, I want it to change the text color back to grey and have the value of the text box be 'Email' again. Also, how do I change the font? Here's the code:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<form>
<input type="text" value="Email" name="Email" 
style="color:grey;text-align:left;background:white">
</form>
<form>
<input type="text" value="Email" name="Email" 
style="color:grey;text-align:left;background:white">
</form>

Thanks!

Last edited by peter_budo; Dec 3rd, 2008 at 7:32 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Text box mouseover

Nov 30th, 2008

HTML itself can provide you all the elements you need. But with dynamic changes, you will be needing some script for this to generate the output you need. Perhaps you can start with DHTML.

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Jan 2008

Posts: 57

Reputation: Walkere is an unknown quantity at this point

Solved Threads: 5

Walkere

Offline

Junior Poster in Training

Re: Text box mouseover

Dec 6th, 2008

Some of that (changing the colors of the text and whatnot) you can do with CSS styles. The rest (changing the actual text) requires that you use a scripting language like Javascript.

For the styling (changing text color, background color, etc) you can apply a style to input buttons. With pseudo classes, you can have that style change based on whether it's being targeted (in focus) or not.

For example, put this in the <head> section of your page, and test it out with an <input type="text"> element...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<style type="text/css">
  input { color: #ccc; background-color: #eee; }
  input:focus { color: #000; background-color: #fff; }
</style>
<style type="text/css">
  input { color: #ccc; background-color: #eee; }
  input:focus { color: #000; background-color: #fff; }
</style>

The style applied to input:focus will only be applied when the input class is selected. The rest of the time, it will display what is declared for all inputs, and so it looks like it's inactive.

To alter the text inside the input, you'll need to use javascript. Posting in the javascript forum might get you some more specific help, but here's a nudge in the right direction.

Get a javascript framework, like jquery, to make it easier to select elements from the DOM.

jQuery has two methods to help you. The focus() method will trigger when an item is selected, and at that point you could clear the input and alter its style. The blur() method will trigger when the focus leaves the input, and at that point you could replace the text with "E-mail" and alter the style again.

Good luck,
- Walkere

Thoughts on Education and Technology
PHP Tutorials, Web Design Tips, and More...