input type submit - border changes colour automatically on click

[shazde7]

Hello,

I am facing an issue with a submit button that keeps changing its border colour when clicked on (it turns black and stays like that until another button is clicked). I am not sure how to prevent this change of colour. Has anyone come across this issue before?

// my css
input
{
padding: 4px;
color:#888888;
border: 1px solid #B4CFEC;
position: relative;
margin-top: 5em;
margin-left: 17em;
}

// my html
<input class="buttonL" type="submit" name="login" value="login" />

Thanks in advance,
Sid

[D_Blackwell]

You should only be seeing the outline while the click is active. Release the click, and the outline border should go away immediately.

Option 1:
<input onfocus="this.blur();" class="buttonL" type="submit" name="login" value="login" />
(Does not work in Opera.)

Option 2:
You might be able to work a crossbrowser CSS solution by making a declaration with the outline property and possibly :focus

This works in Firefox only:

button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
}

* * * You might want to ask about this in the Accessibility forum. They might offer up some detailed reasons and examples as to why some people would not consider this to be a good idea at all.

[shazde7]

Thanks for your reply, option 1 was exactly what I was looking for and solved my problem!

Thanks again, appreciated!
Sid