Multiple Switch Button Hintergrundfarbe CSS

Question

Ich habe ein Problem in einer benutzerdefinierten Switch-Button-Gruppe. Ich möchte meinen Schalter Tastenhintergrund wie in diesem Demo http://codepen.io/vanderlanth/pen/yYeryP handeln, aber wenn ich Hintergrundfarbe zu den Elementen in dieser Demo gebe, wird der gleitende Teil unsichtbar, während zwischen Elementen gelegentlich gleitend. Kann mir jemand dabei helfen?

Sie können überprüfen, was ich von http://labs.epcsht.com/nash/index.html unter Switch Abschnitt versuchen soll.

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

Sie können prüfen,

Answer 1

ich ein Proof of Concept bis gepeitscht, aber ich denke, Sie werden wahrscheinlich einige JS einlassen müssen, um diese mehr erweiterbar ...

überarbeitet Markup:

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

Demo 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%; 
} 

Nur ein Hinweis, aber die Verwendung des Attributs hidden in Ihrem Beispiel macht diese Optionsfelder für Bildschirmleser unzugänglich.

Wenn diese wirklich gemeint sind Tasten zu sein, wollen anstelle von Radio-Optionen, können Sie auch so etwas wie zu sein das Markup revidieren: auch entsprechend müssten anpassen

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

hoffe das hilft dir auf dem weg!