how to make button stay highlighted after click on screen? - css

Question

I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted.
I am using following code:
<button type="button" class="btn btn-default">New</button>
<button type="button" class="btn btn-default">Used</button>
<button type="button" class="btn btn-default" autofocus>Any</button>

Answer 1

So you want JSFiddle?
CSS
.active {
color: #F00;
}
JS
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
}

Answer 2

HTML :
<button id="highlight" ..... ></button>
CSS :
#highlight, #highlight:hover, #highlight:active, #highlight:focus {
color://any-color;
// more css
}
NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.

Answer 3

Try
var yourbuttons = document.getElementsByClassName('highlight-hover');
for (var i = yourbuttons.length - 1; i >= 0; i--) {
var currentbtn;
yourbuttons[i].onclick=function(){
if(currentbtn){
currentbtn.classList.remove("highlight");
}
this.classList.add("highlight");
currentbtn=this;
}
};
There's not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here's a working version of what it seems you want because i'm bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked

Answer 4

First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals .
$('#myModal').on('shown.bs.modal', function () {
$('#button3').focus()
})
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active.
So add .active or .focus to the button that you want to highlight always.
<button type="button" class="btn btn-default active">Any</button>