多個開關按鈕背景顏色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將需要相應調整爲好。

希望這可以幫助你一路！