I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page.
However, an issue arises when I click on the glyphicon-star icon, causing it to remain yellow even after tabbing to another element.
Is there a way to modify the CSS so that it only applies to keyboard navigation?
<span ng-class="{'glyphicon glyphicon-star' : stack.favorite, 'glyphicon glyphicon-star-empty' : !stack.favorite}" style="float:right;padding-right:10px;padding-top:6px;"ng-click="toggleFavoriteStack(stack,'User');">
</span>
.
.glyphicon.glyphicon-star:focus {
color: yellow;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
.glyphicon.glyphicon-star-empty:focus {
color: yellow;
box-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}