选择标签的向下箭头的对齐问题答案

【问题标题】：alignment issue with the down-arrow for select tag选择标签的向下箭头的对齐问题
【发布时间】：2021-12-14 10:39:12
【问题描述】：

我有一个form，其中我有一个City Name 字段
我面临down-arrow 对齐的一个问题，目前我有aligned 与right 和background 属性

类似的东西

background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;

但是你可以看到它触及了一个div的border，我想从right添加一些spacing
这样我就有了equal spacing

我尝试添加 padding、margin、left 和 right 属性，但整个 div 移动了 city code

谁能告诉我这到底是什么问题？

编辑： 添加代码sn-p

.cityName {
    display: flex;
  max-width: 300px;
  margin: 0 auto;
}

.form-inputs{
    background: #FFFFFF;
    border-radius: 5px;
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    color: #445566;
    margin-bottom: 10px;
}

.cityName select {
    width: 90px;
    margin-left: 10px;
}

.cityName select.city-short{
    position: relative;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right white;
    background-size: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

<label for="lastName" class="cityName">
   <input type="text" id="cityName" placeholder="Enter City Name" class="city validated form-inputs">
   <select class="city-short form-inputs">
      <option selected="" value="" >NA
      </option>
      <option selected="" value="" >US
      </option>
   </select>
</label>

【问题讨论】：

请在minimal reproducable example 中添加更多详细信息，例如HTML 和CSS，最好在stack snippet 中添加。见how to ask

标签： css select alignment dropdown

【解决方案1】：

您可以为背景属性添加背景位置大小，例如：

background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right 10px center white

【讨论】：