选项卡通过标签而不是单选按钮html中的圆圈

Question

我想要隐藏单选按钮圈，只需标记标签。我能够隐藏圆圈但是当我使用Tab键浏览所有标签时，它不会关注相应的标签。下图显示了我想要浏览并选择任何一个标签。

目前我使用单选按钮并尝试导航。使用键盘的导航工作正常，但它不会关注所选的标签。

div
                label.font-normal(ng-repeat="priority in vm.priorities")
                    input(type="radio", ng-value="priority", ng-model="vm.selectedPriority", name="priority.{{ priority }}", ng-change="vm.changedPriority()")
                    span.color-block-radio-grp-label(for="radio", ng-class="'priority-{{ priority }}'", ng-focus="focus='true'")
                        | &nbsp {{ priority | alertPriority }}

我应该使用其他输入类型来实现它还是尝试更改此代码本身的某些内容？

Answer 1

Html解决方案

以下是我将如何解决问题：
只需更改html和css-stylesheet即可 （注意，我不知道任何angularjs所以我可能完全错了）

＆＃13;

＆＃13;

.pretty-radio label {
  border-radius: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  margin: 3px;
  padding: 0px 10px;
  display: inline-block;
}
.pretty-radio input[type=radio].Urgent:checked ~ Label.Urgent::before,
.pretty-radio input[type=radio].High:checked ~ Label.High::before,
.pretty-radio input[type=radio].Medium:checked ~ Label.Medium::before,
.pretty-radio input[type=radio].Low:checked ~ Label.Low::before,
.pretty-radio input[type=radio].None:checked ~ Label.None::before {
  content: '✔';
  font-size: 0.8em;
}
.pretty-radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.pretty-radio input.Urgent ~ Label.Urgent {
  border-color: #D0231C;
  color: #D0231C;
}
.pretty-radio input.Urgent:focus ~ Label.Urgent {
  background-color: #D0231C;
  color: white;
}
.pretty-radio input.High ~ Label.High {
  border-color: #FF9700;
  color: #FF9700;
}
.pretty-radio input.High:focus ~ Label.High {
  background-color: #FF9700;
  color: white;
}
.pretty-radio input.Medium ~ Label.Medium {
  border-color: #F2C335;
  color: #F2C335;
}
.pretty-radio input.Medium:focus ~ Label.Medium {
  background-color: #F2C335;
  color: white;
}
.pretty-radio input.Low ~ Label.Low {
  border-color: #69A94B;
  color: #69A94B;
}
.pretty-radio input.Low:focus ~ Label.Low {
  background-color: #69A94B;
  color: white;
}
.pretty-radio input.None ~ Label.None {
  border-color: #888;
  color: #888;
}
.pretty-radio input.None:focus ~ Label.None {
  background-color: #888;
  color: white;
}

＆＃13;

<div class="pretty-radio">
  <input id="5" name="level" class="Urgent" type="radio" />
  <label for="5" class="Urgent">Urgent</label>

  <input id="4" name="level" class="High" type="radio" />
  <label for="4" class="High">High</label>

  <input id="3" name="level" class="Medium" type="radio" />
  <label for="3" class="Medium">Medium</label>

  <input id="2" name="level" class="Low" type="radio" />
  <label for="2" class="Low">Low</label>

  <input id="1" name="level" class="None" type="radio" />
  <label for="1" class="None">None</label>
</div>

＆＃13;

＆＃13;

＆＃13;