只有键盘焦点时，如何才能为glymphicon图标应用CSS样式？

Question

I have a glyphicon-star icon that operates as a checkbox. When a user keyboard navigates to the star by tabbing, the star icon receives it's yellow css style for when it is the focused element. The idea behind this is to simply show a user where they are located on a page.

HOWEVER, the problem that occurs is that when I click on the glyphicon-star icon, the star will retain a yellow color, even when tabbing to the next element.

How can I adjust the CSS to apply only for the 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;
  }

Answer 1

你可以尝试：

input:not(:focus) { /* Styles for only form inputs that do not have focus */ }