Как стилизовать select в cs-cart?

Question

[Andrew E]

Стоит задача кастомизировать select option.

<div class="ty-price-slider__filter-prefix">{$filter.prefix nofilter}</div>
                <select class="ms-max-select ty-price-slider__input-text hidden-select" name="right_{$filter_uid}"
                        id="slider_{$filter_uid}_right"
                        {if $disable_slider}
                            disabled="disabled"
                        {/if}
                        data-ca-previous-value="{$right} {$filter.suffix nofilter}"
                >
                    {for $i = $min to $max}
                        <option value="{$i}" {if $filter.current_right == $i}selected{/if}>{$i} {$filter.suffix nofilter}</option>
                    {/for}
                </select>

Выглядит сейчас вот так


Пробовал через скрытие его и привязки

<div class="custom-select-display">Выберите опцию</div>
                <ul class="custom-select-options hidden">
                    {foreach from=$options item=option}
                        <li class="custom-option" data-value="{$option.value}">{$option.label}</li>
                    {/foreach}
                </ul>

$(document).ready(function () {
                // Переключение видимости кастомного списка при клике на "display"
                $(document).on('click', '.custom-select-display', function () {
                    $(this).siblings('.custom-select-options').toggleClass('hidden');
                });
                
                // Обработка клика по элементу кастомного списка
                $(document).on('click', '.custom-select-options .custom-option', function (event) {
                    var selectedText = $(this).text();
                    var selectedValue = $(this).data('value');
                    
                    // Обновляем отображаемый текст
                    $(this).closest('.custom-select-container').find('.custom-select-display').text(selectedText);
                    
                    // Находим скрытый select и обновляем его значение
                    var $hiddenSelect = $(this).closest('.custom-select-container').find('.hidden-select');
                    $hiddenSelect.val(selectedValue).trigger('change'); // Триггерим событие change для обработки CS-Cart
                    
                    // Закрываем кастомный список
                    $(this).parent().addClass('hidden');
                });
                
                // Закрытие списка при клике вне его
                $(document).on('click', function (e) {
                    if (!$(e.target).closest('.custom-select-container').length) {
                        $('.custom-select-options').addClass('hidden');
                    }
                });
            });

Но что-то не заводится совсем. Вообще ни выпадушка не рабоает, ни отправляется ничего. Совсем видимо не понимаю как это работает. Есть у кого-то опыт?