css - 多个切换按钮背景色 CSS

Question

我在自定义切换按钮组中遇到问题。我想像这个演示中一样使用我的开关按钮背景 http://codepen.io/vanderlanth/pen/yYeryP但是当我给这个演示中的元素背景颜色时，滑动部分偶尔会在元素之间滑动时变得不可见。谁能帮我解决这个问题？

您可以从 http://labs.epcsht.com/nash/index.html 中查看我正在尝试做什么在开关部分下。

<div class="switchButtonCont">
<input type="radio" name="switch" value="Male" id="switchButton-1" hidden="hidden"/>
<label for="switchButton-1">Male</label>
<input type="radio" name="switch" value="Female" id="switchButton-2" hidden="hidden" checked/>
<label for="switchButton-2">Female</label>
<input type="radio" name="switch" value="Both" id="switchButton-3" hidden="hidden"/>
<label for="switchButton-3">Both</label>
<input type="radio" name="switch" value="Meraba" id="switchButton-4" hidden="hidden"/>
<label for="switchButton-4">Meraba</label>
</div>

你可以检查

Answer 1

我提出了一个概念证明，但我认为您可能需要让一些 JS 参与进来以使其更具可扩展性......

修改后的标记:

<fieldset class="cont">
  <input type="radio" name="switch" id="o1">
  <label for="o1">
    Opt 1
  </label>
  <input type="radio" name="switch" id="o2">
  <label for="o2"> 
    Opt 1
  </label>
  <input type="radio" name="switch" id="o3">
  <label for="o3">
    Opt 1
  </label>
  <span class="slider"></span>
</fieldset>

演示 CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}

.cont {
  display: flex;
  border: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;

  label {
    border: 1px solid;
    flex-grow: 1;
    padding: 8px;
    position: relative;
    z-index: 2;
  }

  input {
    position: absolute;
    height: 1px;
    width: 1px;
    opacity: .000001;
  }
}

.slider {
  width: 33.3333%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #ccc;
  z-index: 1;
  transition: left .2s ease-in-out;
}

#o2:checked ~ .slider {
  left: 33.33333%;
}

#o3:checked ~ .slider {
  left: 66.66667%;
}

仅供引用，但在您的示例中使用 hidden 属性将使屏幕阅读器无法访问这些单选按钮。

如果这些真的是按钮，而不是单选选项，您可能还想将标记修改为:

<div class="cont>
  <button type="button" aria-pressed="true">
    Btn 1
  </button>
  <button type="button" aria-pressed="false">
    Btn 2
  </button>
  <button type="button" aria-pressed="false">
    Btn 3
  </button>
</div>

css 也需要相应地调整。

希望这对您有所帮助!