iOS设备HTML select输入框尺寸异于其他设备，如何用CSS统一样式？

iOS的Safari会给select元素套上一套默认的系统样式，包括特殊的内边距、圆角和下拉箭头，这就导致它和Android、Windows设备上的select显示尺寸、样式差异明显。你可以通过以下CSS代码统一各平台的样式：

/* 重置iOS select的默认webkit样式，核心是移除系统默认外观 */
select {
  -webkit-appearance: none;
  appearance: none;
  /* 统一内边距，消除iOS默认的过大内边距 */
  padding: 0.5rem 1rem;
  /* 统一边框和圆角样式 */
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 统一字体属性，避免系统字体差异 */
  font-size: 1rem;
  font-family: inherit;
  /* 统一背景色 */
  background-color: #fff;
  /* 添加自定义下拉箭头，替代iOS默认箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23666"><path d="M8 11L3 6h10z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
  /* 预留箭头空间，避免文本被遮挡 */
  padding-right: 2rem;
}

/* 统一聚焦样式，替换iOS默认的高亮效果 */
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

关键说明： #

• -webkit-appearance: none 和 appearance: none 是核心：这两个属性能彻底移除iOS给select添加的特殊系统样式，如果之前用-webkit属性没生效，大概率是优先级不够——可以给select加个专属类名（比如.custom-select），用类选择器来写样式，或者在属性后加!important（尽量少用，但紧急情况可以试试）。
• 自定义下拉箭头：去掉默认箭头后，select会看起来像普通输入框，所以用内嵌SVG加个箭头，保持用户能识别这是下拉选择框。你可以修改SVG的颜色、大小来匹配你的设计。
• 统一基础样式：内边距、边框、字体这些属性要和你在Android/Windows上的样式保持一致，这样尺寸就能对齐。

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