How to stop buttons from staying depressed with Bootstrap 3

Question

How do you make a button in Bootstrap 3 undepress automatically after being clicked?

To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).

Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.

Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/

Exosphere

Answer 1

In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:

1. Click and hold on a button.
2. Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.

If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.

Example

This example uses jQuery but you can achieve the same effect with vanilla JavaScript.

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

Fiddle

Acidic

Answer 2

Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:

<a href="#" role="button" class="btn btn-default">one</a>.

See the Anchor element section here: http://getbootstrap.com/css/#buttons

Steapsin

I think is a better solution than the blur() method. In many browsers a flash of the focus styling will appear with the blur() method which you may not want. One thought would be to use a <span> element instead of an anchor pointing to an empty fragid, since this can cause scroll to top behavior. Here is a fiddle comparing the three. – Facetious

this method did not work for me. i am still getting a focused button element using the anchor tag – Nitroparaffin

A quick test in current chrome and firefox show it working for an anchor tag without an href (<a role="button" class="btn btn-default">yada</a>), but remaining selected if it has an href (as per @Steapsin example). I would have thought an href-less anchor was invalid, but the consistency between chrome and firefox makes it appealing - oh, and it works in IE11 without an href too. – Written

@Typhlosaurus: an href-less anchor tag is valid HTML 5: "If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed" (W3C HTML 5 spec). The approach worked fine for me, without the potential side effects of linking to an empty fragid. – Mcdougal

Answer 3

The button remains focused. To remove this efficiently you can add this query code to your project.

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

This also works for anchor links

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});

Kutchins

This answer worked for me after I removed event from click(function()). – Hollo

Answer 4

My preference:

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>

Dunnite

Answer 5

Or angular way:

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

Replace _MORE_ELEMENT_ with your others elements.

Or attribute way:

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

Then add the attribute to your html element: blur-me

<button blur-me></button>

Photoengrave

This lead me in the right direction, but threw the following error element.blur() is not a function so I did event.target.blur() – Nicko

Don't forget to unbind that listener when the directive is destroyed! – Abampere

@PeterKirby, if it's bind directly to html-node won't it be destroyed automatically? – Belinda

Answer 6

It's the browser's focus since it's a form element (input). You can easily remove the focusing with a little css

input:focus {
    outline: 0;
}

Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/

EDIT

Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

If you don't want this behaviour, just overwrite it with your css.

Eby

Answer 7

This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}

Karafuto

Answer 8

I realize this thread is ancient, but still. This is my preferred method, probably the simplest and most elegant:

button:focus {
    background: transparent;
    border-color: #ccc;
}

Chlorite