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.