@chelnokov_a

Если ли способ сделать адаптивной ширины под выбранный пункт?

Добрый день.

В целом из заголовка все понятно. Но поясню ТЗ более явно ниже.

Необходимо использовать браузерный select. Т.е. имитировать его работу кастомными элементами не получится.

Я имею примерно такую структуру

<div class="shop__select-wrap">
     <select id="sity-shop-select" class="shop__select" name="shop">
          <option>Санкт-Петербург</option>
          <option>Москва</option>
          <option>Екатеринбург</option>
          <option>Ростов на дону</option>
    </select>
           
    <i class="icon icon_type_arrow_bottom_x icon_size_x ">
        <svg class="icon__svg -svg" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <use xlink:href="#arrow_bottom_x"></use>
        </svg>
    </i>
</div>


Как видно выше - рядом с селектом расположена иконка. Необходимо сделать так чтобы чтобы она отступала от заполненой части селекта а не от него самого. Или же ширина селекта должна равняться ширине его содержимого выбранного в данный момент

На самом деле подойдут любые варианты. Иконку можно вставить как через css так и через js

Буду рад любым советам
Спасибо!
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Не думаю, что до конца понял смысл задачи. Автоматически менять ширину - это min-width+onchange.
Иконка стрелки раскрытия - бэкграундом посередине справа, плюс правй отступ. Посмотрите, как сделан custom-select в Bootstrap
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы