PDA

View Full Version : Problems with form button



Sega2
Sep 27th, 2009, 01:20 PM
Hi guys. I'm kinda new to html and css coding so I would appreciate a little help. I'm trying to set up a simple "name, e-mail (textfields), subscribe(button)" form. The problem is i cant apply any :focus effects to my subscribe button. I would like it to have an inset border when pressed, but so far no luck. Weird thing is when i replace the ":focus" with ":hover" the inset border effect applies nicely to the button when hovered upon. Heres the html code:



<form action="#">
<div>
<p>
<label for="name">Name</label>
<input type="text" id="name" />
</p>
<p>
<label for="e-mail">E-mail</label>
<input type="text" id="e-mail" />
</p>
<p class="submit">
<input type="submit" value="Subscribe" />
</p>
</div>
</form>



And heres the css code:




label
{
width: 4em;
float: left;
text-align: right;
color:#FFFFFF;
margin-right: 0.5em;
margin-top: 0.4em;
display: block;

}

input
{
width: 115px;
border: 2px inset #cccccc;
}


.submit input
{
margin-left: 4.5em;
width:80px;
border: 2px outset #cccccc;

}


.submit input:focus{
border: 2px inset #cccccc;
}