Here is how to add active with css
Let me know if this help 🙂
.active:active {
color: red;
}
.active:hover {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<div class="container-fluid p-3">
<button class='btn btn-outline-primary active'>Active</button>
<button class='focus'>Focus</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-outline-primary">Click here</button>
</div>
is there a way to fix the problem mentioned in the quote below:
Bootstrap: link
:hover isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element.
here is my code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-3">
<button class="btn btn-outline-primary">Click here</button>
</div>
When you tap the button in ipad the :active state doesn’t change and stays sticky. Is there any way to fix it in css?
