如何使我的单选按钮看起来像带有 ngFor 的切换按钮？

Question

这是一个 BuzzFeed 风格的测验。 我的电台选择是循环播放并加起来达到一定分数的问题。我不知道如何让它们显示为选中没有单选按钮中的圆圈。

这是我目前所拥有的：

<div class="form-group">
        <label
          >{{ quizQuestions[0] }}
          <div class="btn-group btn-group-toggle"  *ngFor="let flavor of answerSetOne">
            <label class="btn btn-primary active">
              <input  
              checked
              type="radio" 
              name="flavor" 
              class="btn-check" 
              ngModel [value]="flavor.num" 
              required/>
              {{ flavor.name | titlecase}}
            </label>
          </div>
        </label>
      </div>

当我输入data-toggle="buttons" 时，单选圆圈消失，但不再为结果选择选项。

我怎样才能让圆圈消失以显示代码和用户选择了某个选项？

这就是它现在工作时的样子。 working quiz section

Answer 1

这里看起来更像是一个 CSS 问题。您可以使用以下命令使它们消失：

input[type=radio] {
  appearance: none;
}