有什么方法可以固定CSS中自定义下拉箭头的大小？

Question

我正在尝试修复自定义下拉箭头的大小，但是当我放大或缩小自定义下拉菜单的网页大小时也发生了变化。.有什么解决办法吗？

这是当前网页

当我放大或缩小时，自定义箭头的大小将更改。

这是我的代码：-

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