htmlcsstwitter-bootstrap-3html-input

How to stop buttons from staying depressed with Bootstrap 3

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/

Solution

  • 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