CSS无法在单选按钮之间设置边框样式

Question

我想知道什么是此任务的最佳解决方案。我有4台收音机，我希望它们之间有灵活的线路。

Answer 1

以这种方式使用单选按钮时，您应记住使用fieldset和legend为收音机提供语义含义，以方便访问。 （我从引导程序中加入了.sr-only类来隐藏legend和inputs）

下面是一个广播示例，所有广播都在后面，请让我知道是否不清楚。

字段集： 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>

Answer 2

您只能在所有四个圈子的后面使用一行。

如果您需要在圆和相邻线之间留出一些空间，只需将border: 2px solid #fff添加到圆中即可。

.wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}


.line {
  position: absolute;
  height: 2px;
  background-color: #ccc;
  width: 100%;
  top: 50%;
}

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #aaa;
  position: relative;
  z-index: 1;
}

<div class="wrap">
  <div class="line"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Answer 3

.process-steps-wrap {
  width: 100%;
  margin: 100px auto;
}
.ps-process-step {
    display: flex;
}
.col3 {
  position: relative;
  width: 20%;
}
.ps-process-step .col3:not(:first-child):before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    top: 48%;
    left: -50%;
    right: 0;
    border: 2px #ECECEC solid;
}
.process-step-num {
    display: flex;
    justify-content: center;
    font-size: 18px;
}
.process-step-circle {
    border: 5px #ebebeb solid;
    border-radius: 100%;
    background: #ECECEC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5d5353;
    width: 30px;
    height: 30px;
    font-weight: 900;
    z-index: 1;
}
.process-steps-wrap .col3:nth-child(3) .process-step-circle {
    background-color: #E18183;
    color: #ffffff;
}

<div class="process-steps-wrap">
  <div class="row ps-process-step">
    <div class="col3 ">
      <div class="process-step-num">
        <div class="process-step-circle step1">1</div>
      </div>
    </div>
    <div class="col3 ">
      <div class="process-step-num">
        <div class="process-step-circle step2">2</div>
      </div>
    </div>
    <div class="col3">
      <div class="process-step-num">
        <div class="process-step-circle step3">3</div>
      </div>
    </div>
    <div class="col3">
      <div class="process-step-num">
        <div class="process-step-circle step4">4</div>
      </div>
    </div>
  </div>
</div>

请检查上面的代码。