How to remove the blue button illumination when it was pressed, when you remove the original border?

I donโ€™t want the blue border when you click on the button that does not have the 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 all the CSS let me know, just add it to the html so that it is short.

+3
source share
4 answers

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

Set outline: nonein this selector and it will disappear:

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

Your question is a bit vague, but try "outline: none;"

+1
source

outline :active

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

, , : visited css.

,

a:visited {
   text-decoration: none;
   border: none;
   color: black; /* change to your desired color */
}
0

All Articles