.champ-interrupteur { display: flex; overflow: hidden; } .champ-interrupteur input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; } .champ-interrupteur label { background-color: #e4e4e4; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); transition: all 0.1s ease-in-out; width: 38px; height: 34px; } .champ-interrupteur label:hover { cursor: pointer; } .champ-interrupteur input:checked + .interrupteur-allumer { background-color: #0d6efd; box-shadow: none; } .champ-interrupteur input:checked + .interrupteur-eteint { background-color: #dc3545; box-shadow: none; } .champ-interrupteur label:first-of-type { border-radius: 4px 0 0 4px; } .champ-interrupteur label:last-of-type { border-radius: 0 4px 4px 0; }