CSS: Field Focus Format

Introduction

Author: Martin Warning
Year: 2007
License: Free

This is just a simple CSS code to change the background color of an form input field at the moment the user selects it. We use the CSS focus state to modify the element. This code isn't yet supported by Internet Explorer, but it does work in Firefox.

Code

Languages: The following code is an example of the CSS field focus, the XHTML part: 
<input type="text" name="txtName" class="inputtext" size="20" />
And the CSS part: 
.inputtext{background-color:#eaeaea;}
.inputtext:focus{background-color:#fff;}

The :focus event occurs when a user select the field. It works like the :hover event for the mouseover.

Example: See it in action

Printed from: http://flyinglowlander.com/ (5/20/2012)
© FlyingLowander.com 2006 - 2012

Visit http://flyinglowlander.com for more XHTML, CSS, ASP and JavaScript examples, templates and tutorials.