how to style text box when clicked with mouse

[otuatail]

Hi I want to change background and text colour when I enter each one by clicking it. A kind of mouse in mouse out kind of thing.

 

TIA

 

Desmond.

[scootstah]

input[type="text"]:focus {
     background:red;
     color:white;
}

[otuatail]

Sorry Tried that no success.

 

* {padding:0; margin:0;}
ul {margin-left:20px; padding-left:0;}

body
{
    font-family:Areal;
    font-size:15px;
}

h2, h3
{
    color: #aa8800;

}

input[type="text"]:focus 
{     
    background:red;     
    color:white;
}

a:link {color: #aa8800; text-decoration: underline; } /* aa8800 */
a:active {color: #0000ff; text-decoration: underline; } /* 0000ff */
a:visited {color: #aa8800; text-decoration: underline; } /* aa8800 */
a:hover {color: #ff0000; text-decoration: underline;background: #cccccc; } /* ff0000 */

[scootstah]

Did you mean textarea then? Just replace input[type=text] with textarea.

 

Working example here: http://jsfiddle.net/kRRrQ/1/

[otuatail]

No I tried that and it is not a text area although that would be useful to know

 

CSS =

input[type="text"]:focus, textarea:focus 
{
    background:red;
    color:blue;
}

 

 

Code=

<div><br> Company Key:<span style="color:blue;font-size:12px"> (Supplied by your administrator)</span></div>
<div><input type="input" name="PWD2" size="25" maxlength="20" readonly="readonly" value="Not required" style="background-color:#777777;color:red"> <span style="color:red"><?echo $_SESSION["Error_2"]?></span></div>


<div><br><br> User name:<br></div>
<div><input type="input" name="Name" size="25" maxlength="20" value=""> <span style="color:red"><?echo $_SESSION["Error_1"]?></span></div>

<div><br><br> User Key:<br></div>
<div><input type="password" name="PWD1" size="50" maxlength="35" value=""> <span style="color:red"><?echo $_SESSION["Error_3"]?></span></div>
<div style="height:20px"> </div>

 

 

http://www.des-otoole.co.uk/library

 

 

[otuatail]

Ok this forum dosn't allow updates

 

I now have

 

input[type="input"]:focus,input[type="password"]:focus,input[type="text"]:focus, textarea:focus 
{
    background:red;
    color:blue;
}

 

input[type=input]:focus is what I needed, but what then is ,input[type=text]:focus

if textarea is textarea:focus

 

Thanks

 

Desmond.

 

 

P.S. Set focus to the first would be cool !