代码之家 › 专栏 › 技术社区 › KoboldMines

CSS不能设置单选按钮之间的边框样式

css html

KoboldMines · 技术社区 · 7 年前

我想知道这项任务的最佳解决办法是什么。我有4台收音机,我想在它们之间有灵活的线路。

3 回复 | 直到 7 年前

itodd 7 年前

fieldset 和一个 legend 为您的收音机提供可访问性的语义。(我已经包括 .sr-only 传奇 inputs

下面是一个收音机的例子,后面都是线,如果有什么不清楚的话,请告诉我。

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

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>

Martin Schulz 7 年前

你可以用四个圆圈后面的一条线。

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>

Arshiya Khanam 7 年前

.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>

请检查以上代码。