onFocus in CSS?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Bluenose
    New Member
    • Apr 2012
    • 56

    onFocus in CSS?

    Is it possible to have a textbox's focus using css? The background color should change when the cursor is in the active form field if possible, moving back to its original colour when another field is clicked.

    At the moment I have this in <style>:
    Code:
    <style type=text/css>
    
    p {font-family: verdana, arial, sans-serif; font-size: 10px;}
    
    p.mySize {font-family: verdana, arial, sans-serif; font-size: 0.75em;}
    
    table.myTable {margin-left:60px;}
    
    input.blue {background-color: #D9F5F1; font-size: 12px; color: 1E1CDE;}
    input.marine {background-color: #D9F5F1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
    textarea.marine {background-color: #D9F5F1; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
    
    </style>
    while the form itself, which is in a table, looks like this:

    Code:
    <table border="0" cellspacing="1">
    		<tr>
    			<td valign="top">
    				<p class="mySize">Name:</p>
    			</td>
    			<td colspan="2">
    				<input class="marine" name="ContactUs_Name" size="35" value="<% =ContactUs_Name %>">
    			</td>
    		</tr>
    		<tr>
    			<td valign="top">
    				<p class=mySize>Email:</p>
    			</td>
    			<td colspan="2">
    				<input class="marine" name="ContactUs_Email" size="35" value="<% =ContactUs_Email %>">
    			</td>
    		</tr>
    		<tr>
    			<td valign="top">
    				<p class="mySize">Subject:</p>
    			</td>
    			<td colspan="2">
    				<input class="marine" name="ContactUs_Subject" value="<% =ContactUs_Subject %>" size="35">
    			</td>
    		</tr>
    		<tr>
    			<td valign="top">
    				<p class="mySize">Message:</p>
    			</td>
    			<td valign="top">
    				<textarea class="marine" rows="10" name="ContactUs_Body" cols="35"><% =ContactUs_Body %></textarea>
    			</td>
    		</tr>
    		<tr>
    			<td valign="top">
    				&nbsp;
    			</td>
    			<td colspan="2">
    				<input class="blue" type="submit" value="Send">
    			</td>
    		</tr>
    	</table>
    Many thanks.
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    You can use the :focus selector. For it to work in IE8, a DOCTYPE has to be declared.

    Comment

    • Bluenose
      New Member
      • Apr 2012
      • 56

      #3
      Hello Rabbit

      Many thanks for that - I will read up on it.

      Cheers

      Comment

      Working...