Change text after an input focus

[damiancds]

Right now, I'm using the focus pseudo to change the text color from gray to black, but when it leaves the input and going to the next, it changes back from the black back to the gray. What i want is for it to stay black. I've tried using the :visited , which didn't work.EDIT:also, when i click on my buttons, the text color changes to black (from white) and it only changes back to white when i click somewhere else.If you wanted to look at it, here's my code:CSS:

fieldset {     background-color: #ffffff; /*#ccff99;*/margin: auto;padding-right: 10px;width: 470px;border: 3px ridge black;background-image: url('body-bg.jpg');background-position: bottom right;background-repeat: repeat-x;}legend {margin-left: 1em;  color: #000000;  font-weight: bold;  border: 2px solid green;background-color: ivory;}label {    max-width: 250px; min-width: 200px; height: 1.5em;line-height: 1.5em;   margin: 5px 0px 0px 0px;    padding-right: 10px;text-align: right;  color: #ffffff;background-color: #007700;float: left;clear: left;}input.button {float: left;height: 2em; margin: auto;width: 150px; line-height: 1em; margin: 10px;    text-align: center;  color: #ffffff;border: 2px outset black;background-color: green;}input.button{border: 2px outset black;}input.button:hover{border: 2px inset black;}fieldset input.button{border: 2px outset white;}fieldset input.button:hover{border: 2px inset white;}input {float: left;width: 250px; height: 1.5em; line-height: 1.5em;   margin: 5px 5px 0px 0px;  text-align: left;  color: #aaaaaa;border: 1px inset black;}input:focus{color: #000000;}input:visited{color: #000000;}select{ float: left; max-width: 300px; min-width: 250px; height: 2em;line-height: 1em;margin: 5px 5px 0px 0px;  padding: 2px 0px 0px 2px;     text-align: left;  color: #aaaaaa;border: 1px inset black;}select:focus{color: #000000;}option{padding: 5px 0px 0px 5px;height: 2em;line-height: 1em;border-bottom: 1px dashed black;}textarea{   float: left; width: 250px; height: 200px;    margin: 5px 5px 0px 0px;    text-align: left;  color: #aaaaaa;border: 1px inset black;}textarea:focus{color: #000000;}

HTML:

  <form method='post' action='/system/contact.php'><fieldset><legend>Contact Ledge Rock Farm</legend><label for='email'>Email:</label> <input name='email' type='text' id='email' value="You@domain.com" onfocus="this.value=''; this.onfocus=null;">	<label for='subject'>Subject:</label> <select name='subject' id='subject'>	<option value='None'>-- Please Select --</option>	<option value='Feedback'>Comments/Feedback</option>	<option value='Questions'>Questions</option>	<option value='Order Inquiry'>Order Inquiry</option>	<option value='Product Inquiry'>Product Inquiry</option>	<option value='Other'>Other</option>	</select>  <label for='message'>Message:</label>  <textarea name='message' rows='10' cols='40' id='message' onfocus="this.value=''; this.onfocus=null;">Your message here</textarea>  <input  class="button" type='reset' value="Clear Form" class="button">    </fieldset>  <input type='submit' value='Send Message' class="button">  <input type='reset' value='Clear Form' class='button'>  </form>

EDIT: nevermind about the button problem, I had an input:focus overlapping my buttons, so I got that fixed

[thescientist]

I think you would need to use Javascript to make a permanent change like that. You can only use :visited for links.http://www.w3schools.com/css/css_pseudo_classes.asp