フォーカスとフォーカスの使い方4

Question

recipe-listという名前のコンポーネントにngForを使って作成したリストがあります。すべてのアイテムは、コンポーネントレシピアイテムを使用して作成されます。私は特定のアイテムがフォーカスしているときにそのスタイルを変更したいと思います。私はの色の境界線を変更する必要があるレシピリスト - >

<div class="row"> 
    <div class="col-xs-12"> 
    <button class="btn btn-success">New Recipe</button> 
    </div> 
</div> 
<hr> 
<div class="row"> 
    <div class="col-xs-12"> 
    <app-recipe-item 
    *ngFor="let recipeEl of recipes" 
    [recipe]="recipeEl"></app-recipe-item> 
    </div> 
</div> 

のためのレシピ - アイテム - >

<a 
    class="list-group-item clearfix" 
    (click)="onSelected()" 
    style="cursor: pointer;"> 
    <div class="pull-left"> 
     <h4 class="list-group-item-heading">{{ recipe.name }}</h4> 
     <p class="list-group-item-text">{{ recipe.description }}</p> 
    </div> 
    <span class="pull-right"> 
     <img src="{{ recipe.imagePath }}" alt="{{ recipe.name }}" class="img-responsive" style="max-height: 50px; border-radius: 50%; width: 60px; Height: 60px;"> 
    </span> 
</a> 

については

：ここ

はhtmlです1つのフォーカスのみ

Answer 1

要素のフォーカスを得るには、属性 "tabindex"を追加する必要があります。

<a tabindex="0" ...> 

擬似クラス "：focus"でスタイルを設定できます。 CSSを使用してください。