Adding tab index on a href element causing the active class not to be deactiavted

Question

I have created a button like feel on a href element. I have added a tabindex on it so that when user uses tabs keys he lands on the button.

Scenario: User clicks on button and takes the mouse out. The active style still remains until clicked outside. If i remove the tab index and test after user clicks and takes the mouse out the effect is gone which is right?

How can i achieve the same even when tab index is there?

<a class="button" tabindex="0">CALCULATE</a>
.button {
    background-color: rgb(13, 93, 166);
    display: inline-block;
    padding: 20px;
    border: 1px solid blue;
}

.button:active, .button:focus, .button:hover {
    background-color: rgb(96, 178, 212);
}

https://jsfiddle.net/f2ywgcnr/

You might get the right idea from this question - the answer explains it. https://stackoverflow.com/a/11703334/4244684 — Stender, Aug 02 '17 at 08:22

Aslam · Accepted Answer · 2017-08-02T09:26:46.593

1

Just remove the focus and you are good to go.

Just overwrite the focus in case it is in base class.

.button {
  background-color: rgb(13, 93, 166);
  display: inline-block;
  padding: 20px;
  border: 1px solid blue;
}

.button:active,
.button:hover {
  background-color: rgb(96, 178, 212);
}


/* Overrite the focus */

.button:focus {
  background-color: none;
}

<a class="button" tabindex="0">CALCULATE</a>

edited Aug 02 '17 at 09:26

answered Aug 02 '17 at 08:24

Aslam

9,204
4
35
51

Let me know if this what you were looking for. – Aslam Aug 02 '17 at 08:24
I cannot remove focus as it comes by my base classes. – Hacker Aug 02 '17 at 09:13

score -2 · Answer 2 · edited Aug 02 '17 at 11:02

Just CSS not tested I think it will not meet your desires I think you should write jquery / javascript. You can consult: http://jsfiddle.net/S7kJ2/

$('.button').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});

.button { 
    float:left;
    color: #333;
    width: auto;
    text-align: center;
    padding: 0 10px;
    background: #f0f0f0;
    line-height: 1.5em;
    height: auto;
}
.button.active {
    background: #ea0000;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="button ">My button</div>

or Keep button in active state until clicked upon again

Adding tab index on a href element causing the active class not to be deactiavted

2 Answers2