select标签自定义down-arrow右对齐后加右侧间距导致容器偏移问题

问题成因 #

• 你通过background属性设置的下拉箭头默认以元素的右内边距边界为基准对齐，所以会紧贴右侧边框
• 你之前直接给select添加padding、margin属性会导致容器偏移，是因为你已经给select固定了width: 90px，在默认盒模型（content-box）下，新增的内边距/外边距会撑大元素整体宽度，进而引发布局错位

解决方案 #

直接调整背景图的定位参数即可，该修改仅作用于背景资源，不会影响元素本身的尺寸和布局，完全适配你现有的代码逻辑：
你只需要将.cityName select.city-short选择器中的background属性修改为如下写法：

.cityName select.city-short{
    position: relative;
    /* 核心修改：background-position使用 方位词+偏移量 写法调整位置 */
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right 10px center white;
    background-size: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

参数说明：
right 10px代表箭头距离元素右边界10px，和你给.form-inputs设置的padding: 0 10px左内边距刚好对称，实现你要的左右间距均等效果；center代表箭头垂直居中，避免出现上下偏移的问题。

内容的提问来源于stack exchange，提问作者Priya