On peut styliser un input type checkbox en un joli bouton toggle. Cela se fait en javascript pour insérer et envelopper l’input avec des éléments label et span.
L’élément input a la classe toggle :
|
1 |
<input type="checkbox" class="toggle' /> |
Javascript
Dans un fichier javascript, on sélectionne les élements portant la classe toggle, on crée, pour chacun, un élément label dans lequel on insère la checkbox que l’on cachera, et un élément span que l’on stylisera pour représenter le bouton on/off. On écrit :
|
1 2 3 4 5 6 7 8 9 10 |
const toggle = 'toggle'; document.querySelectorAll(`.${toggle}`).forEach(el => { const label = document.createElement('label'); label.setAttribute('class', `${toggle} switch`); const slider = document.createElement('span'); slider.setAttribute('class', 'slider round'); el.parentNode.insertBefore(label, el); label.appendChild(el); label.appendChild(slider); }); |
Style
On style ensuite en SASS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
$color-button-primary: #007cba; .switch { position: relative; display: inline-block; width: 44px; height: 18px; & input { opacity: 0; width: 0; height: 0; } & + span.description { vertical-align: middle; margin-left: 0.5em; } } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cccccc; transition: .4s; &:before { position: absolute; content: ""; height: 16px; width: 16px; left: 1px; bottom: 1px; background-color: #ffffff; transition: .4s; } &.round { border-radius: 34px; &::before { border-radius: 50%; } } } input { &:checked { & + .slider { background-color: $color-button-primary; &::before { transform: translateX(26px); } } } } |
Il ne reste plus qu’à importer la feuille de style, que l’on appelle _toggle.scss :
|
1 |
@import "toggle"; |
On peut aussi, grâce à SASS, préfixer les propriétes CSS par un identifiant :
|
1 2 3 |
#my-id { @import "toggle"; } |
Et hop, un joli bouton toggle ou switch pour les formulaires contenant des boîtes à cocher.
U La classe et le bouton s’appelle toggle bascule, basculer, et non toogle, cela m’arrive très souvent, et l’on cherche l’erreur partout sans la trouver.
