Is there a way to make the width responsive for the selected item?

Question

css

Good afternoon.

In general, everything is clear from the title. But I will explain the TK more clearly below.

You must use a browser select. Those. imitating its work with custom elements will not work.

I have something like this structure

<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>

As you can see above, there is an icon next to the select. It is necessary to make it so that it recedes from the filled part of the select and not from it. Or the width of the select should be equal to the width of its currently selected content

. In fact, any options will do. The icon can be inserted both through css and through js

I will be glad for any advice
Thank you!

Answer 1

I do not think that I fully understood the meaning of the task. Automatically change width is min-width+onchange.
The expand arrow icon is a background in the middle right, plus a right padding. See how custom-select is made in Bootstrap