Simple field color on hover question... [Archive] - HTML Forums

skwurl

10-03-2007, 03:27 PM

Hi there,

I wrote some CSS that changes the background of text fields on hovers, but i can't get the color change to stay unless the mouse is over it.

I want the color change to remain as long as the field is active (someone typing in it).

Here's a webpage with a setup similar to mine.

http://www.metasolutions.co.nz/web-site-company-contact.html

When the cursor is off the fields, the border goes back to default. Any ideas on how to make it stick?

eTwerp

10-04-2007, 05:07 AM

Hi skwurl, what youre asking for can be achieved with the use of a [PSEUDO CLASS] (http://www.w3schools.com/css/css_pseudo_classes.asp). More specifically :focus. Try out this example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inputs</title>
<style type = "text/css">
input {
border: 1px solid #ccc;
}
input:focus {
border: 1px solid #000;
}
input.name:focus {
border: 1px solid #ff9a00;
}
</style>
</head>
<body>

<form action = "#">
<p>
Name<input type = "text" class = "name" />
Address<input type = "text" />
</p>
</form>
</body>
</html>

Hope it helps :D