多个开关按钮背景颜色CSS

Question

我在自定义切换按钮组中存在问题。我想在演示http://codepen.io/vanderlanth/pen/yYeryP中扮演我的开关按钮背景，但是当我给这个演示中的元素赋予背景色时，滑动部分偶尔在元素间滑动时变得不可见。任何人都可以帮助我吗？

你可以在Switch部分查看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将需要相应调整为好。

希望这可以帮助你一路！