I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will display various types of products using Angular. Currently, there is no visual indication that a category has been selected when clicking on one of the filters, which negatively impacts the user experience. Ideally, I would like to achieve this effect using only HTML and CSS.
<div class="checklist categories">
<ul>
<li><a><span></span>All</a></li>
<li><a><span></span>House Favourites</a></li>
</ul>
</div>
.checklist ul li{
font-size:14px;
font-weight:400;
list-style:none;
padding: 7px 0 7px 23px;
cursor: pointer;
}
.checklist li span{
float:left;
width:11px;
height:11px;
margin-left:-23px;
margin-top:4px;
border: 1px solid #d1d3d7;
position:relative;
}
.checklist li a{
color:#676a74;
text-decoration:none;
}
.checklist li a:hover{
color:#222;
}
.categories a:hover span{
border-color:#a6aab3;
}
.checklist .checked span{
border-color:#8d939f;
}
.checklist a:active span {
background-color: red;
}
// The issue lies with this code as :focus does not have any effect
.checklist a:focus span {
background-color: red;
}