Triggering :active state html label element - html

Question

I've been passed a recently-appeared bug which involves a label element nolonger being set to :active.
My (probably) simple question is: How would I toggle the label's :active state when the label is clicked? I can check dev tools and test what the css will do if the label were :active (see screenshot below) but how would I get the label to actually be :active? The :hover state works, so I'm hoping :active can too.
This had previously been working, apparently and, as you can see from the screenshot, the css for an :active state had already been written.
Just to be clear: I don't want to add an 'active' class to the element; I want to exploit the in-build :active state, similar to :hover.
Thanks.

Answer 1

there is no active or selected state for label element.
What you see is a bootsrap trick imo
You are free to give any class to get it worked, e.g.
$('.u').on('click', function(){
$('.u').removeClass('e');
$(this).addClass('e');
});
.u:focus {
background-color: red;
}
.u {
background-color: lightgrey;
}
.e {
background-color: red;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<div class="col-xs-12 col-md-10">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-md u e" >
<input type="radio" name="weight" value="1">Small (0-3 lbs)
</label>
<label class="btn btn-md u">
<input type="radio" name="weight" value="2"> Medium (3-7 lbs)
</label>
<label class="btn btn-md u">
<input type="radio" name="weight" value="3"> Large (7+ lbs)
</label>
</div>
</div>
</div>