Stop Bootstrap group buttons to stay focused

Question

How do I prevent buttons from staying focused after being clicked?

HTML

<div class="container">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

 body {
    margin: 10px;
}

Please see what I mean in this Fiddle.

I know that I could get round this by applying the styling to anchors <a> instead of buttons, but I can't do that because I have to keep the following original asp.net controls.

<asp:Button ID="SearchResultsPDF"  runat="server" Text="PDF Report" CssClass="btn btn-default" OnClick="PDFReport_Click" />

<asp:Button id="SearchResultsCSV" runat="server" Text="CSV Report" CssClass="btn btn-default" onClick="CSVReport_Click"></asp:Button>

Also I have seen this solution with jQuery, which works fine, but it seems too specific.

jQuery

$(".btn").mouseup(function(){
    $(this).blur();
})

I would like to know if there is a CSS only solution and I appreciate some directions on how to do that. Thanks.

Answer 1

If you don't want to use that jquery snippet, and you can't add a class. The only option I can think of is by overriding the styling for :focus.

.btn-default:focus {
    background-color: #fff;
    border-color: #ccc;
}

Ideally you would want to use your own class, but that depends on if you are able to add a class to the asp:Button.

Answer 2

You want something like:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

The .blur() method correctly removes the focus highlighting and doesn't mess up Bootstraps's styles.