Как я могу применить CSS-стиль для значка glymphicon ТОЛЬКО, когда он имеет фокус клавиатуры?

Question

У меня есть значок с символом глификона, который работает как флажок. Когда пользовательская клавиатура перемещается к звезде путем табуляции, значок звезды получает желтый стиль css, когда он является сфокусированным элементом. Идея заключается в том, чтобы просто показать пользователя, где они находятся на странице.

ОДНАКО, проблема заключается в том, что когда я нажимаю значок символа звезды, звезда будет сохранять желтый цвет, даже если табуляция на следующий элемент.

Как настроить 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

Вы можете попробовать:

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