Safari下拉菜单样式失效及长度不一致问题求助

我之前也踩过Safari对原生下拉菜单样式兼容的坑，结合你的代码和问题，给你整理两个核心问题的解决方案：

一、Safari中<select>样式丢失的问题 #

Safari对原生<select>元素的样式渲染有自己的私有规则，很多常规CSS属性（比如自定义边框、内边距、字体）会被浏览器默认样式覆盖，这就是你看到Chrome正常、Safari几乎丢失全部样式的原因。

解决思路：重置默认外观 + 强制应用自定义样式 #

1. 首先关闭Safari的默认外观：添加-webkit-appearance: none;（这是让自定义CSS生效的关键），同时加上标准的appearance: none;兼容其他现代浏览器。
2. 合并你代码里重复的font-family属性，避免样式冲突。
3. 可选：关闭默认外观后原生下拉箭头会消失，你可以用背景SVG或伪元素自定义箭头，保持UI一致性。

修改后的.inputCalc样式代码：

.inputCalc {
  width: 60%;
  /* 重置浏览器默认下拉菜单外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 统一盒模型（同时解决宽度不一致问题） */
  box-sizing: border-box;
  border: solid 2px black;
  padding: 10px;
  font-family: 'futura-pt', initial;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  /* 自定义下拉箭头（用SVG实现，无需外部图片） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L2 4h8z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px; /* 给箭头留出空间，避免文字被遮挡 */
}

/* 针对Safari的额外兼容：如果边框仍不生效，可添加此规则 */
.inputCalc::-webkit-select-container {
  border: solid 2px black;
}

二、下拉菜单与输入框长度不一致的问题 #

你设置了width: 60%但长度不一致，核心原因是盒模型计算规则不统一：

• 默认情况下，CSS的box-sizing为content-box，元素总宽度 = 设置的width + 边框宽度 + 内边距值。
• 如果你的输入框（比如<input>元素）设置了box-sizing: border-box，而<select>没有，那么两者的总宽度就会出现差异（因为select的边框和内边距会额外增加总宽度）。

解决方法： #

1. 统一盒模型规则：给所有表单元素（包括下拉菜单和输入框）设置box-sizing: border-box，确保宽度计算基准一致：

/* 推荐加到全局样式里，统一所有元素的盒模型 */
* {
  box-sizing: border-box;
}

/* 或者单独给表单元素设置 */
.inputCalc, input[type="text"], input[type="number"] {
  box-sizing: border-box;
}

2. 检查父元素：确保下拉菜单和输入框的父元素是同一个，且父元素没有额外的padding/margin，避免百分比宽度的计算基准不同。
3. 统一内边距：Safari对<select>的默认内边距可能和其他浏览器有差异，手动设置padding值可以消除这种差异。

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