Bouton de commutation multiple background-color CSS

Question

J'ai un problème dans un groupe de boutons de commutation personnalisé. Je veux agir sur mon fond de boutons comme dans cette démo http://codepen.io/vanderlanth/pen/yYeryP mais quand je donne une couleur de fond aux éléments de cette démo, la partie coulissante devient invisible en glissant entre les éléments de temps en temps. Est-ce que quelqu'un peut m'aider avec cela ?

Vous pouvez vérifier ce que j'essaie de faire à partir de http://labs.epcsht.com/nash/index.html sous la section Switch.

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

Vous pouvez vérifier

Answer 1

Je fouetté une preuve de concept, mais je pense que vous aurez probablement besoin d'obtenir un certain JS impliqué pour rendre plus extensible ...

balisage révisé:

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

démo 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%; 
} 

Juste un FYI, mais en utilisant l'attribut hidden dans votre exemple rendra ces boutons radio inaccessibles aux lecteurs d'écran.

Si ceux-ci sont vraiment destinés à être des boutons, au lieu d'options de radio, vous pouvez également vouloir réviser le balisage pour quelque chose comme:

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

aurait css besoin d'ajuster en conséquence aussi.

espérons que cela vous aide le long du chemin!