Styling @ Html.CheckBoxFor en tant que curseur

Question

Je n'arrive pas à créer une case à cocher générée par @Html.CheckBoxFor() en tant que curseur.

J'ai identifié le "coupable" comme champ de saisie masqué. J'ai fait un fiddle pour illustrer le problème. Il contient 3 cases à cocher - une générée par @Html.CheckBoxFor(), la seconde utilisant le code généré par @Html.CheckBoxFor() avec l'entrée cachée commentée et la troisième case à cocher classique.

Vous verrez que le curseur ne fonctionne pas pour le premier. Je besoin d'utiliser @Html.CheckBoxFor() parce que je veux que la case à cocher à être lié à une propriété sur mon modèle, mais ne peut pas comprendre comment faire fonctionner le style de curseur ...

À mon avis j'ai:

<div class="slider"> 
    @Html.CheckBoxFor(m => m.IsChecked, new { @class = "toggle-pill" }) 
    @Html.LabelFor(m => m.IsChecked, new { @class = "toggle-label" }) 
</div> 

Le Css pour coiffer:

.slider [type="checkbox"] { 
    display: none; 
} 

.slider .toggle-label { 
    display: block; 
    width: 40px; 
    height: 20px; 
    position: relative; 
    background: #ed495c; 
    border-radius: 10px; 
    transition: background 0.2s ease; 
    cursor: pointer; 
} 

.slider .toggle-label::before { 
    content: ''; 
    display: block; 
    width: 50%; 
    height: 100%; 
    background: #ffffff; 
    border-radius: 50%; 
    box-shadow: 0 0 0 1px #d1d1d1; 
    position: absolute; 
    left: 0; 
    top: 0; 
    transition: transform 0.2s ease-in-out; 
} 

.slider [type="checkbox"]:checked + .toggle-label { 
    background: #93ed49; 
} 

.slider [type="checkbox"]:checked + .toggle-label::before { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
} 

La propriété modèle, IsChecked, est typeof bool.

Answer 1

Le problème est que votre css pour .slider [type="checkbox"]:checked + .toggle-label { et .slider [type="checkbox"]:checked + .toggle-label::before { utilise le adjacent sibling combinator (+) qui sélectionne le prochain frère.

Parce que CheckboxFor() génère un <input type="hidden" .. /> immédiatement après le <input type="checkbox" .. />, le sélecteur choisit le mauvais élément (l'entrée masquée, pas l'étiquette).

Vous devez modifier le code CSS d'utiliser le general sibling combinator (~), afin que votre css devient

.slider [type="checkbox"]:checked ~ .toggle-label { 
    background: #93ed49; 
} 

.slider [type="checkbox"]:checked ~ .toggle-label::before { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
} 

Je suppose que votre utilisation d'un plug-in pour cela, de sorte que vous pouvez modifier le fichier d'origine, ou ajouter un css supplémentaire fichier contenant ce qui précède.

Référez-vous à this forked fiddle pour voir comment cela fonctionne.