Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Как создать триггер-переключатель для checkbox в Tilda

Теплица "Плодородная"

С усиленным каркасом из 2мм профиля

Каркас теплицы

Выберете параметры и закажите теплицу

Как создать триггер-переключатель для checkbox в Tilda

Создали блок BF402N

Создали в нём поле "Вопрос с вариантами ответа" с настройкой "Несколько вариантов ответа (галочки)"

Добавили стиль на страницу в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём триггер-переключатель вместо галочки checkbox в форме в Tilda.
Длительность видео: 16 минут

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
/*Фоновый трек*/
.t-checkbox__indicator {
    height: 26px;
    width: 52px;
    background-color: #f0f0f0;
    box-shadow: 0px 0px 4px 0px rgba(201,201,201,1);
    border-radius: 13px;
    cursor: pointer;
    opacity: 0.6;
    border-width: 0;
    margin-right: 15px;
}
/*Шар*/
.t-checkbox__indicator::before {
    content: "";
    height: 26px;
    width: 26px;
    box-shadow: inset 0px 0 13px 0px #7d7d7d;
    position: absolute;
    border-radius: 13px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
/*Смещение шара*/
.t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator:before {
    margin-left: 28px;
    box-shadow: inset 0px 0 17px 0px #ff3900;
}
.t-checkbox__indicator:after {opacity: 0;}
.t-text_xs { font-size: 16px;}
.t-checkbox__control {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
</style>