Removing square on clicked button

[LeeU]

Does anybody know how to eliminate the small square when the button is clicked on? I'm using the following CSS:

input.button {
color: #000; background: inherit;
font-size: .8em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: .3em;
}

When you click on the button, it leaves a square in the middle of the button until you click somewhere else.

[David Harrison]

That's a default browser behaviour that applies to all links and buttons when they have focus. The only way to get rid of it would be to make it lose focus whenever it gains focus, like so:<input type="button" class="button" value="Click me!" onfocus="this.blur();">But this will make it impossible to tab through the page past this button, so I really don't recommend using it.

Instead you could just use a normal link and make it look exactly the same, the dotted border that the browser adds would be around the outside so it would be less noticeable.

Another alternative would be to do something like this:<button type="button|submit|reset" class="button"><span>hi</span></button>You could apply the padding to the <span> element and push that dotted border up against the border that you specify, again making it less noticeable.

[LeeU]

Thanks, David. I'll give it a try.