Jump to content

Change text after an input focus


damiancds
 Share

Recommended Posts

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

Edited by damiancds
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...