javascript - 如何仅当 glymphicon 图标具有键盘焦点时才应用 CSS 样式？

Question

我有一个星形图标，用作复选框。当用户键盘通过 Tab 键导航到星号时，星号图标在成为焦点元素时会收到黄色的 css 样式。其背后的想法是简单地向用户显示他们在页面上的位置。

但是，出现的问题是，当我单击星形图标时，即使按 Tab 键切换到下一个元素，星形也会保留黄色。

如何调整 CSS 以仅应用于键盘导航？

 <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

你可以尝试:

输入:not(:焦点) { /* 仅适用于没有焦点的表单输入的样式 */ }