How To Style A Button Tabbed State When Its Default Behviour Is Prevented In Javascript

In the example there is a button labeled 'tab' and the css is not the same as other buttons (it seems disabled). I want the borders of that button to be black while key down or tab

Solution 1:

In your css, style it as you want. The :active is a pseudo selector to select on whether the button is 'active'. I.E. When it is in a mousedown state.

.tab:active{
   border:1px solid black;
}

Although you can fiddle with this to style it as you wish.

---

To style 'all buttons' on mouse down, you could use something like:

input[type="button"]:active{    /*all input buttons on mousedown */outline:0;                  /*remove default outline from all*/border:1px solid pink;      /*add styling as you wish*/
}

DEMO

---

After reading up on firefox, I found that it doesn't like the e.preventDefault() being used on a 'mousedown' event handler, whilst maintaining an 'active' css. Changing this to a 'click' event allows Firefox to accept the button as a button input, and hence can be used as such:

$('.tab').on('click', function (e) {     /*THIS BIT CHANGED*/
    e.preventDefault();
    ...
    ...
});