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('.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 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.

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./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 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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You can just style .btn-default:focus to have the same background colour as no focus. I can't see another way of doing this without adding a class or jquery. – Jonnerz Commented Dec 9, 2014 at 15:51
• Is that bad practice? – U r s u s Commented Dec 9, 2014 at 15:53
• If you're unable to add a class, and you don't want to use that jquery snippet, then from what I can tell it's the only option. It's not necessarily bad practice if you want it to be global. – Jonnerz Commented Dec 9, 2014 at 16:01

4 Answers 4

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.

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.

for example if you bakcground color is green in your buttons by css

.My_button{
   background:#00c189;
}

bootstrap for default have focus colors in your buttons

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

try :

.My_button:focus, My_button:hover{
   background:#00c189;
}

if dont work use

.My_button:focus, My_button:hover{
       background:#00c189 !important;
    }

If you are using React-Bootstrap and want to maintain good accessibility:

onMouseDown={this.handleClick} onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) {this.handleClick()}}}

handleClick(e) { if (e) {e.preventDefault()}; }

The focusing of a button happens after the MouseDown event, so we prevent that when users click. If we stop there, then the space bar and return key do not "click" the button. Do not preventDefault for the onKeyUp event because then the button continues to look "focused" after clicking somewhere else.