How to remove the blue highlight of a button once pressed when u remove original border?

Question

I don't want the blue border when you click on a button that doesn't have its original border, here is the HTML:

<div id="buttonholder" style="border 1px solid black">
    <button id="previous">&lt; Previous round</button>
    <button id="next">Next round &gt;</button>
    <button id="current">&gt; Current round&lt;</button>

    <div style="font-size: 0;">
        <form id="inputfield" name="inputfield">
            <input type="inputfield" value="Search for round here...">
            <input type="button" value="Go">
        </form>
    </div>

    <div id="displayround">
        1/38
    </div></button>
</div>

If I need to post the entire CSS let me know, just added it in the html to make it short.

Answer 1

Its caused by most browsers default styling of the outline property on the :active state

button:active, input[type="button"]:active {
    outline: none;
}

Answer 2

In Chrome at least, the blue border is a result of the focus pseudo-class, not active.

Set outline: none in that selector and it will go away:

button:focus, input[type="button"]:focus {
    outline: none;
}