Есть ли способ исправить размер настраиваемой стрелки раскрывающегося списка в css?

Question

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

Это текущая веб-страница

When I zoom in or zoom out custom arrow size will be changed..

.container select {
  border-radius: 20px;
  padding: 5px 38px 7px 23px;
  border: 2px solid orange;
  appearance: none;
  position: relative;
}

.container i.fa-angle-down {
  position: absolute;
  right: 69%;
  top: 92.5%;
  border-radius: 20px;
  color: white;
  background-color: orange;
  padding: 8px;
  padding-left: 10px;
  font-size: 20px;
  pointer-events: none;
}

<div class="container">
  <h6>Current open positions</h6>
  <div class="form-group">
    <label class="search">Search by Location</label>
    <select>
      <option>Canada</option>
      <option>USA</option>
    </select><i class="fas fa-angle-down"></i>
  </div>
</div>

Answer 1

Поставляет относительный контейнер, который действует как граница для дочернего элемента с абсолютным позиционированием. Что-то вроде ниже, ура;

.container select {
  border-radius: 20px;
  padding: 5px 38px 7px 23px;
  border: 2px solid orange;
  appearance: none;
  position: relative;
}

.container i.fa-angle-down {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1rem;
  border-radius: 20px;
  color: white;
  background-color: orange;
  padding: 8px;
  padding-left: 10px;
  font-size: 20px;
  pointer-events: none;
}

.custom-dd {
  display: inline-block;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <h6>Current open positions</h6>
  <div class="form-group">
    <label class="search">Search by Location</label>
    <div class="custom-dd">
      <select>
        <option>Canada</option>
        <option>USA</option>
      </select>
      <i class="fas fa-angle-down"></i>
    </div>
  </div>
</div>