Как сделать кастомные чекбоксы в Tilda?

Модификация поможет кастомизировать стандартные чекбоксы, настроить тип, расположение, прозрачность и цвета активного и неактивного чекбокса

Время настройки: 2 минуты

Генератор кода

Видео инструкция

Инструкция

1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Несколько вариантов ответа" (галочки)(Multiple variants of answer (checkboxes));

2. Выбираем тип чекбокса: Квадрат, С текстом, Большой круглый, Маленький круглый;

3. Выбираем расположение: стандартное или в ряд (количество определяется размером формы);

4. После выбора типа, настраиваем цвета активного и не активного чекбокса;

5. Добавляем блок Т123 и вставляем в него сгенерированный HTML код или вставляем код в Настройки сайта → Еще → Пользовательские CSS-стили;

Сгенерировать пример

Копировать код <!-- Кастомные чекбоксы в Tilda -->
<!-- https://nolim.cc/custom-checkbox -->
<style>   #rec0000000 .t-checkboxes__wrapper .t-checkbox__control{ display: inline-block; margin-right: 20px !important; } 
 #rec0000000 .t-checkbox__indicator { border: 1px solid #000; border-radius: 2px; opacity: 1; background-color: #cecece; }  #rec0000000 .t-checkbox__indicator:after { border: solid #000; border-width: 0 2px 2px 0; left: 0px; top: 4px; position: relative; margin: 0px auto; } 
  #rec0000000 .t-checkbox__indicator:after { left: 50%; top: 50%; position: absolute; width: 10px; height: 10px; background-color: #000; border-radius: 0px; border: none; transform: translate(-50%, -50%) !important; } 
 #rec0000000 .t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator { opacity: 1; background-color: #000; border: 1px solid #000; } 
   #rec0000000 .t-checkbox__control{ display: inline-block; margin-right: 20px !important; } 
 #rec0000000 label.t-checkbox__control { height: 28px; line-height: 28px; position: relative; border: 0px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator { display: inline-block; opacity: 1; border: 0px; height: 28px; width: 90px; box-sizing: border-box; position: relative; border-radius: 2px; background: #848484; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { content: 'off'; display: inline-block; box-sizing: border-box; width: 45px; position: absolute; top: 0; left: 45px; text-transform: uppercase; text-align: center; color: #fff; font-size: 10px; line-height: 28px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { display: inline-block; box-sizing: border-box; width: 44px; height: 26px; border-radius: 1px; border: 0px; position: absolute; top: 1px; left: 1px; z-index: 5; text-transform: uppercase; text-align: center; background: #fff; line-height: 26px; font-size: 10px; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); transform: rotate(0deg); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator { background-color: #70c767; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator:before { content: 'on'; color: #fff; left: 0; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator:after { background: #fff; transform: translate3d(44px, 0, 0); } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) + .t-checkbox__indicator:hover { cursor: pointer; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) + .t-checkbox__indicator:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } 
   #rec0000000 label.t-checkbox__control { display: inline-block; margin-right: 20px !important; } 
 #rec0000000 .t-checkbox__control .t-checkbox__indicator { display: inline-block; opacity: 1; height: 28px; width: 56px; border: 1px solid #00000020; box-sizing: border-box; position: relative; border-radius: 20px; background:  #EEEEEE; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { box-sizing: border-box; width: 40px; position: absolute; top: 0; left: 45px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { display: inline-block; box-sizing: border-box; width: 24px; height: 24px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); border-radius: 50%; border: solid #fff; position: absolute; top: 1px; left: 1px; background: white; color: #eee; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); transform: rotate(0deg); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator { background-color: limegreen; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator:after { background: #70c767; transform: translate3d(28px, 0, 0); border: solid #fff; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) + .t-checkbox__indicator:hover { cursor: pointer; } 
   #rec0000000 label.t-checkbox__control { display: inline-block; margin-right: 20px !important; } 
 #rec0000000 .t-checkbox__control .t-checkbox__indicator { height: 14px; opacity: 1; width: 36px; border: 0px; border-radius: 20px; background: #A0A0A0; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { width: 20px; top: 0; left: 45px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { position: absolute; border: 0px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); display: inline-block; box-sizing: border-box; width: 20px; height: 20px; border-radius: 20px; top: -3px; left: 1px; background: #fff; color: #777; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator { background-color: #8db5ff; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator:after { background: #1a73e8; transform: translate3d(16px, 0, 0); } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) + .t-checkbox__indicator:hover { cursor: pointer; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) + .t-checkbox__indicator:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } #rec0000000 .t-checkbox__control input[type="checkbox"]:disabled + .t-checkbox__indicator { background: #0058ff; } 
 </style>