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

Question

[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

Буду рад любым советам
Спасибо!

Comments

[Ankhena]

Т.е. имитировать его работу кастомными элементами не получится.

Это почему ещё?

[chelnokov_a]

Ankhena, по ТЗ

[Ankhena]

chelnokov_a, придется на js выяснять где заканчивается текст