Как добавить изображения
в выпадающий список формы Tilda?

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

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

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

Инструкция (Развернуть↓)

ВАЖНО:

Не забудьте настроить бордер для поля, так как данная модификация не подтягивает настройки полей Вашей формы;
Максимальное количество загружаемых картинок - 15 штук;
Очередность картинок соответствует очередности их загрузки, т.е. к примеру в списке пять пунктов, вставляя ссылку на первую картинку в генератор, она будет соответствовать первому пункту в выпадающем списке;

1. Добавляем стандартную форму или форму в Zero Block на страницу и добавляем поле Выпадающий список (Dropdown);

2. В генераторе указываем имя поля (VARIABLE NAME) и вставляем его в вашу форму в поле Выпадающий список (Dropdown);

3. Настраиваем цвет фона активного пункта и при наведении;

4. Настраиваем бордер, толщина, скругление и цвет;

5. Настраиваем тип текста и цвет;

6. Вставляем ссылки на свои картинки или иконки;

Что бы получить ссылку картинки или иконки, на свою страницу вставляем к примеру галерею GL12 и загружаем в неё изображение, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;

7. Копируем сгенерированный HTML код и вставляем его в блок Т123;

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

Копировать код<!-- Как добавить изображения в выпадающий список Tilda? --> 
<!-- https://nolim.cc/image-in-dropdown --> 
<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css' media="all"> <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script> <script> $(document).ready(function(){ $('[name="test1"]').select2({ templateResult: formatState, templateSelection: formatStateMain }); $('[name="test1"]').parents('[data-elem-type="form"]').each(function(i, form){ $(form).on('render', function(){ $("[name='test1']").select2({ templateResult: formatState, templateSelection: formatStateMain }); }); }); }); function formatState (state) { if (!state.id) { return state.text; } var $state = $('<span><div class="nolimIconDropdown" my-data="'+state.id+'" class="t-title" style="display: inline-block; height: 50px; padding-left: 50px; vertical-align: middle; vertical-align: -webkit-baseline-middle;"></div> ' + state.text + '</span>'); return $state; }; function formatStateMain (state) { if (!state.id) { return state.text; } var $state = $('<span><div my-data="'+state.id+'" class="t-title" style="display: inline-block; height: 50px; vertical-align: middle;"></div> ' + state.text + '</span>'); return $state; }; </script> <style> .select2-search--dropdown { display: none; } .select2-selection.select2-selection--single{ border:none; } .select2-selection.select2-selection--single[aria-labelledby*="test2"]{ border: 1px solid #000; border-radius: 1px; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 50px; } .select2-container .select2-selection--single{ height: 50px; } .select2-selection__arrow{ display:none; } .select2-container--default .select2-results__option--highlighted[id*="test2"][aria-selected]{ background-color: #003384; } .select2-container--default .select2-results__option[id*="test2"][aria-selected=true] { background-color: #cecece; color: #cecece !important; } ul.select2-results__options{ -ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none; } ul.select2-results__options::-webkit-scrollbar { width: 0 !important; height: 0 !important; } ul { scrollbar-color: #8a8a8a #fff; scrollbar-width: thin; -webkit-overflow-scrolling: auto; } ul::-webkit-scrollbar { width: 4px !important; -webkit-appearance: none !important; -webkit-overflow-scrolling: auto; overflow:auto; } ul::-webkit-scrollbar:vertical { width: 4px !important; } ul::-webkit-scrollbar:horizontal { height: 4px !important; } ul::-webkit-scrollbar-track { background: #fff !important; } ul::-webkit-scrollbar-thumb { background: #8a8a8a !important; -webkit-border-radius: 10px !important; } ul::-webkit-scrollbar-thumb:hover { background: #000 !important; } .select2-results>.select2-results__options { max-height: 240px !important; } @media screen and (max-width: 1200px){ ul.select2-results__options{ -ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none; } ul.select2-results__options::-webkit-scrollbar { width: 0 !important; height: 0 !important; } } span{ outline:none;} .select2-results .select2-results__option{ background-repeat: no-repeat; background-position:left 6px center; background-size: 40px; height: 40px; }  .select2-results .select2-results__option[id*="test2"]:nth-child(1){ background-image: url(https://cdn-icons-png.flaticon.com/512/2945/2945408.png); }  </style>