Comment ajouter du texte SUR “on” et “OFF” pour le bouton à bascule
Sur mon projet, j'ai voulu ajouter un texte sur mon basculer code.Je voulais donc comme cela, Lors de la bascule SUR il doit afficher le texte "ON" et l'affichage "OFF" texte si apparaît ou disparaît. Je ne peux pas le changer à d'autres basculer parce que c'est déjà avoir un back-end de l'utiliser. Je voulais juste seulement à l'entrée "on" et "OFF" du texte. Merci.
Voici mon code
HTML:
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>
CSS:
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
- voici le code avec exemple. aspdotnetkhan.com/toggle-switch-68.aspx
Vous devez vous connecter pour publier un commentaire.
Vous pourriez le faire comme ceci:
CSS:
HTML:
Ou pur CSS:
CSS:
HTML:
em
s pour le dimensionnement et de telle sorte qu'il est plus facile de réactivité: jsfiddle.net/d0g4tbcjCSS:
HTML:
contenu selon votre choix où vous avez witten "on" et "Off"
essayer cette