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

Кастомизация радиокнопок (radio button) в Tilda

Модификация поможет кастомизировать стандартные радиокнопки, настроить тип, расположение, цвета активной и неактивной радиокнопки
Генератор кода
Видео инструкция
Инструкция (Развернуть↓)
1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Один вариант ответа" (радиокнопки) (One variant of answer (radio button));

2. Выбираем тип радиокнопки: Стандартный круг или кнопки;

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

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

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

ВАЖНО: Цвет основного бордера настраивается на стороне Тильды.

В стандартном блоке Настройки → Стиль полей для ввода → Цвет галочки, переключателей и др. элементов и вставляем свой цвет;

В Zero блоке выбираем форму Settings → Form style → Color of checkboxes, radio btns, and other elements и вставляем свой цвет;
Class элемента
Копировать код<!-- Кастомизация radio button в Tilda -->
<!-- https://nolim.cc/custom-radio-button -->
<style> 
#rec345694055 .t-radio__control { padding: 4px 20px;
display: inline-block;
display: block; width: max-content;
margin-right: 10px !important; }
#rec345694055 .t-radio__indicator { border-style: solid; border-width: 0px; position: absolute; height: 100%; left: 0; top: 0; width: 100%; border-radius: 30px; opacity: 1; } #rec345694055 .t-radio__indicator:after { display: none; } #rec345694055 .t-radio__control .t-radio:checked ~ .t-radio__indicator { border: 2px solid #f7ba47 !important; border-radius: 2px; opacity: 1; }
#rec345694055 .t-radio__control { display: inline-block; margin-right: 5px !important; }
#rec345694055 .t-radio__indicator { border-style: dashed; border-width: 1px; background: transparent; } #rec345694055 .t-radio__control .t-radio:checked~.t-radio__indicator { border: 1px solid #0058FF !important; background: transparent; }
#rec345694055 .t-radio__indicator:after { opacity:0; content: ''; position: absolute; left: 1px; border-radius: 0%; top: -2px; width: 3px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); background: transparent; } #rec345694055 .t-radio__control .t-radio:checked~.t-radio__indicator:after { opacity:1; }
</style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda