html - 输入以 Angular 聚焦时的焦点标签

Question

我有一个网页，它使用单选按钮标签作为按钮，隐藏了输入

<li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
  <input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number />
  <label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
</li>

我希望我的标签在标签或其关联的隐藏输入被选中时明显突出显示。

我找到了一个现成的 jquery snippet但更愿意以 Angular 进行。

Answer 1

我找到了一个纯 CSS 解决方案，因为在我的例子中，标 checkout 现在输入之后:

.amounts input:focus + label {box-shadow: 0 0 2px $brand-primary;}

<ul class="list-group amounts">
  <li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
    <input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number ng-focus="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-blur="$parent.hoverPrompt = null"/>
    <label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
  </li>