html - CSS 无法设置单选按钮之间的边框样式

Question

我想知道这个任务的最佳解决方案是什么。我有 4 个 radio ，我想在它们之间使用灵活的线路。

Answer 1

当以这种方式使用单选按钮时，您应该记住使用 fieldset 和 legend 为您的单选按钮提供语义以实现可访问性。 (我从 Bootstrap 中包含了 .sr-only 类来隐藏 legend 和 inputs)

下面是 radio 的例子，后面都有线，如果有什么不明白的地方，请告诉我。

字段集: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

仅限 sr:https://getbootstrap.com/docs/4.1/getting-started/accessibility/#visually-hidden-content

/* used to visually hide elements but keep keyboard and screen reader functionality */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* reset default fieldset styles */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* rating container */
.rating {
  display: flex;
  justify-content: space-between;
  position: relative;
}

/* pseudo element used to create the line behind circles */
.rating::before {
  background: #ddd;
  content: '';
  height: 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: -1;
}

/* style labels as circles */
.rating__label {
  border: 2px solid #fff;
  border-radius: 2em;
  background: #ddd;
  display: block;
  font-size: 16px;
  height: 2em;
  text-align: center;
  line-height: 2em;
  width: 2em;
}

/* selected circle styles */
input:checked + .rating__label {
  background: #e18083;
  color: #fff;
}

<fieldset>
  <legend class="sr-only">Rating</legend>
  <div class="rating"> 
    <input id="one" type="radio" name="rating" value="1" class="sr-only">
    <label for="one" class="rating__label">1</label>

    <input id="two" type="radio" name="rating" value="2" class="sr-only">
    <label for="two" class="rating__label">2</label>

    <input id="three" type="radio" name="rating" value="3" class="sr-only">
    <label for="three" class="rating__label">3</label>

    <input id="four" type="radio" name="rating" value="4" class="sr-only">
    <label for="four" class="rating__label">4</label>
  </div>
</fieldset>