Стилизация радиокнопок в Тильде

UP TITLE

Стилизация радиокнопок в Тильде – это важный элемент дизайна, который позволяет создать более привлекательный и удобный интерфейс для пользователей. Tilda предоставляет ограниченные возможности для кастомизации стандартных элементов форм, но с помощью нашей Тильда модификации можно расширить функционал и изменить внешний вид радиокнопок под стиль вашего проекта.

Как стилизовать радиокнопки в Тильде

Добавьте на страницу стандартный блок с формой, например «BF204N»
Нажмите на кнопку «Контент», во вкладке «Поля для ввода» добавьте необходимые поля для вашей формы, а также добавьте поле «Вопрос с вариантами ответа»
В поле «Заголовок поля» пропишите вопрос
В поле «Варианты значения» пропишите варианты ответов на ваш вопрос. Каждый вариант должен быть прописан с новой строки
В поле «Вид ответа» выберите «Один вариант ответа»
Сохраните изменения и закройте этот блок
В настройках этого блока нажмите на ссылку «BLOCK CSS CLASS NAME»
В появившемся поле пропишите класс «uc-radio-group»
После всех блоков на странице создайте html блок «Т123»
Нажмите на кнопку «Контент» и скопируйте в него код модификации. В коде прописаны все необходимые свойства для стилизации радиокнопок
Опубликуйте страницу

Модификация для стилизации радиокнопок в Тильде

<style>
    .my_radio {
        background: transparent; /*Фоновый цвет кнопки*/
        border: 2px solid #23A880; /*Толщина границ кнопки, тип, цвет*/
        border-radius: 30px; /*Радиус скругления углов кнопки*/
        width: auto !important; /*Ширина кнопки*/
        margin-right: 10px !important; /*Внешний отступ справа от кнпоки*/
        padding: 10px 15px; /*Внутренние отступы кнопки сверху и снизу, слева и справа*/
        font-weight: 600; /*Жирность текста внутри кнопки*/
    }
    .my_radio span {
        color: #23A880;  /*Цвет текста кнопки*/
        font-size: 18px; /*Размер шрифта текста кнопки*/
    }
    .my_radio:hover {
        background: #23A880; /*Фоновый цвет кнопки при наведении*/
        border: 2px solid #23A880; /*Толщина границ кнопки, тип, цвет при наведении*/
        cursor: pointer;
    }
    .my_radio:hover span {
        color: white; /*Цвет текста кнопки при наведении*/
    }
    
    .my_radio.active {
        background-color: #23A880; /*Фоновый цвет активной кнопки*/
        border: 2px solid #23A880; /*Толщина границ актвиной кнопки, тип, цвет*/
    }

    .my_radio.active span {
        color: white; /*Цвет текста активной кнопки*/
    }
    .uc-radio-group {
        border-radius: 30px;
    }
</style>
<script>
const style = document.createElement('style');
style.textContent = `
    .t-radio__wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .t-radio__item .t-radio__indicator {
        display: none;
    }
    .t-radio__item {
        display: block !important;
        text-align: center !important;
        white-space: nowrap;
        margin-top:0 !important;
    }
`;
document.head.appendChild(style);

document.querySelectorAll('.uc-radio-group').forEach(group => {
    group.querySelectorAll('.t-radio__item').forEach(item => {
        // Добавляем класс my_radio
        item.classList.add('my_radio');
        
        item.addEventListener('click', function() {
            group.querySelectorAll('.t-radio__item').forEach(el => {
                el.classList.remove('active');
            });
            this.classList.add('active');
        });
    });
});

</script>

Заключение
Стилизация радиокнопок в Тильде может существенно улучшить пользовательский интерфейс вашего сайта. С помощью нашей модификации можно сделать радиокнопки более современными и удобными, что позитивно скажется на взаимодействии пользователей с вашим контентом.