自定义HTML Select箭头图片：现有样式无法正常显示箭头求助

嗨，我来帮你搞定这个自定义select箭头的问题～

你的CSS代码里background-image属性的写法犯了语法错误——你把center bottom no-repeat这些背景位置、重复规则的属性值直接拼在了url()后面，浏览器根本无法正确解析这部分内容，自然就显示不出自定义箭头啦。

.form-inline select {
  margin: 10px 35px 15px 0;
  background-color: #fff;
  font-size: 30px;
  width: 80px;
  color: #000;
  /* 拆分背景相关属性，让浏览器能正确识别 */
  background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  /* 缩小箭头尺寸，避免撑满整个select */
  background-size: 20px;
  cursor: pointer;
  display: block;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border: none !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* 给文字留底部空间，防止和箭头重叠 */
  padding-bottom: 8px;
}

• 拆分背景属性：把背景图片、位置、重复规则拆分成独立属性声明，或者用复合属性background一次性写（比如background: #fff url("xxx") center bottom / 20px no-repeat;），两种写法都合法，拆分写更便于后期调整。
• 添加background-size：原箭头图片是512px的大尺寸，直接用会撑满select容器，所以缩小到合适大小（比如20px）才能正常显示箭头。
• 增加底部内边距：避免select内的文字和底部箭头重叠，保证整体视觉美观。

如果你想简化代码，也可以用复合属性写法：

background: #fff url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") center bottom / 20px no-repeat;

这里用/分隔背景位置和背景大小，是CSS标准支持的简写方式。

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