Is :focus styling supposed to override :focus-visible?
I am trying to make a site keyboard accessible and apply my own :focus-visible styling where possible.
My :focus-visible styling is successfully working with most of my button elements but is not working with my ‘Log Out’ button in which some twitter bootstrap focus styling is overriding my own focus-visible styling despite the bootstrap import statement being a lower priority.
How do I make :focus-visible styling higher priority than :focus styling?
Update:
Below is a link to a screenshot of the DevTools with the first 3 stylesheets listed being standard bootstrap found in the node_modules folder.
The 4th stylesheet is my own which attempts to just style the :focus-visible elements.
Screenshot of Devtools summary
HTML Button:
<button id="logOut" class="btn btn-dark btn-block mt-2" (click)="onLogout()"><i class="fa fa-sign-out-alt"></i>Log out</button>
My CSS:
:focus-visible {
background-color: #143a84;
color: #fff;
}
Bootstrap CSS:
.btn-dark:focus, .btn-dark.focus {
color: #212529;
background-color: #cdcdcd;
border-color: #c7c7c7;
box-shadow: 0 0 0 0.2rem rgb(195 196 197 / 50%);
}
Currently when I tab onto the button with the keyboard the bootstrap focus styling applies as opposed to the :focus-visible styling I have set.
2
Answers
In accordance with @Meghna's answer (thank you btw!) I have discovered that adding the following code snippet does achieve my goal of getting the button to display the
focus-visiblestyling rather than thefocusstyling, however, I'm still unclear as to why the original did not work resulting in me needing this additional styling.I have been trying to avoid using
!importantwhere possible as it can make future styling difficult and is widely advised against in what I have read but thanks again for your answer.I therefore now have a fix but it is more of a workaround rather than understanding the original root cause of the problem.
Try with this code if you only want for
:focus-visible. If you want for:focusalso please add#logOut.btn-dark:focus