CODEWITHSUNDEEP
css
Gene9y
Gene9y

Reputation: 859

To keep the btn:focus styling

I am trying to keep the btn:focus styling after clicking away. How can I do it? 

<a href="javascript:;" id="item1" class="hello btn btn-default"> item1 </a>
<a href="javascript:;" id="item2" class="hello btn btn-default"> item2 </a>
<a href="javascript:;" id="item3" class="hello btn btn-default"> item3 </a>

.btn:hover,  
.btn:focus {
   background: #00f;
   border-color: #00f; }

Upvotes: 2

Views: 273

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

By using Javascript onclick="addFocus(this) and add class to selector with wanted style as below:

function addFocus(elem){
 elem.className += " focus";
}
.btn:hover,  
.focus {
   background: #00f;
   border-color: #00f; 
}
<a href="javascript:;" id="item1" class="hello btn btn-default" onclick="addFocus(this)"> item1 </a>
<a href="javascript:;" id="item2" class="hello btn btn-default" onclick="addFocus(this)"> item2 </a>
<a href="javascript:;" id="item3" class="hello btn btn-default" onclick="addFocus(this)"> item3 </a>

Upvotes: 1

Torjescu Sergiu
Torjescu Sergiu

Reputation: 1533

Use Jquery like this:

$(document).ready(function(){
    $(".btn").click(function(){
        $(".btn").addClass("custom-focus");
    });
});

CSS:

.custom-focus {
   background: #00f;
   border-color: #00f;
}

Upvotes: 1

Related Questions