Стилизация чекбоксов под свичи

Стандартные галочки (чекбоксы) выглядят ужасно, а альтернатив или способов стилизации (без использования CSS) нет. И, если второе достаточно легко сделать, то, вот, с альтернативой чекбоксу всё плохо.

Мы предлагаем вам новый вариант — переключатель (свчи). Замените на сайте стандартные чекбоксы свичами. Посмотреть, как это работает можно тут.

Инструкция:

Введите ID блока (или его class), в котором хотите изменить чекбоксы. Если хотите использовать скрипт для всего сайта, сотрите значение ID блока.
Выберите размер свича (20px — оптимальный размер).
Выберите цвет трека в состоянии «выключено».
Выберите цвет трека в состоянии «включено» (может совпадать с предыдущим).
Выберите цвет круга в состоянии «выключено».
Выберите цвет круга в состоянии «включено» (может совпадать с предыущим).
Скопируйте полученный код и разместите в блоке T123 на странице с блоком (если ипользовали ID блока или его class) или в подвале (футер) сайта, чтобы применить ко всем чекбоксам.

<!-- Стилизация чекбоксов под свичи | https://necodim.ru/tilda/checkbox-to-switch -->

<style>
#rec123456789 .t-input-group {
    --switch-size: 20px;
}

#rec123456789 .t-checkbox__control .t-checkbox {
    position: absolute !important;
    z-index: -1 !important;
    opacity: 0 !important;
}

#rec123456789 .t-checkbox__indicator {
    position: relative !important;
    display: inline-block !important;
    width: calc(var(--switch-size) * 2.2) !important;
    height: calc(var(--switch-size) * 1.2) !important;
    border: none !important;
    border-radius: calc(var(--switch-size) * 0.6) !important;
    background-color: #111111 !important;
    transition: background-color 0.3s !important;
    margin-right: calc(var(--switch-size) * 0.5) !important;
    opacity: 1 !important;
}

#rec123456789 .t-checkbox__indicator:after {
    content: '' !important;
    position: absolute !important;
    top: calc(var(--switch-size) * 0.1) !important;
    left: calc(var(--switch-size) * 0.1) !important;
    width: calc(var(--switch-size) * 1) !important;
    height: calc(var(--switch-size) * 1) !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    transform: none !important;
    transition: transform 0.3s !important;
    display: block !important;
}

#rec123456789 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
    background-color: rgba(255, 204, 0, .5) !important;
}

#rec123456789 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator:after {
    transform: translateX(calc(var(--switch-size) * 1)) !important;
    background-color: #ffcc00 !important;
}
</style>