CODEWITHSUNDEEP
htmlcss
Duplo W
Duplo W

Reputation: 623

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

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.

Upvotes: 10

Views: 10008

Answers (4)

BradleyDotNET
BradleyDotNET

Reputation: 61349

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;
}

Upvotes: 11

BR89
BR89

Reputation: 716

I think what you're looking for is use of the :visited in your css.

If it's an anchor tag, try

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

Upvotes: 0

DMTintner
DMTintner

Reputation: 14729

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

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

Upvotes: 2

thesublimeobject
thesublimeobject

Reputation: 1403

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

Upvotes: 1

Related Questions