Mac版Chrome下拉框文本被截断问题求助

问题背景 #

Mac版Chrome浏览器中，下拉框（<select>）内的文本仅显示前5个字符就被截断，但Firefox、Safari显示正常。排查CSS未发现明确干扰，下拉框采用系统默认样式。相关代码如下：

CSS代码 #

.big-settings {
  width: 80%;
}

.big-settings select {
  width: 100%;
  margin-bottom: 40px;
}

.settings select {
  height: 30px;
  font-size: 22px;
  padding-left: 6px;
  margin-bottom: 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
  display: inline-block;
}

HTML代码 #

<form class="settings big-settings top-padding">
  <div class="row">
    <label class="column">Select a Location:</label>
    <select name="selected_location">
      <option value="">Select</option>
      <option value="7">Champagne Salon</option>
    </select>
  </div>
</form>

修复方案 #

方案一：调整内边距与盒模型 #

Mac版Chrome的原生下拉箭头会占用一定水平空间，导致文本被挤压截断。通过添加右侧内边距、修正盒模型解决：

.settings select {
  height: 30px;
  font-size: 22px;
  padding-left: 6px;
  /* 给右侧箭头预留足够空间，避免文本被截断 */
  padding-right: 30px;
  margin-bottom: 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
  display: inline-block;
  /* 确保元素宽度包含内边距和边框，避免超出父容器 */
  box-sizing: border-box;
  /* 强制文本不换行 */
  white-space: nowrap;
}

.big-settings select {
  width: 100%;
  margin-bottom: 40px;
}

方案二：自定义下拉框样式（彻底规避浏览器差异） #

如果原生样式的问题无法通过简单调整解决，可以禁用浏览器原生下拉样式，自定义外观：

.settings select {
  height: 30px;
  font-size: 22px;
  /* 左右内边距分别给文本和自定义箭头预留空间 */
  padding: 0 30px 0 6px;
  margin-bottom: 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
  /* 禁用Chrome原生下拉样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 添加自定义下拉箭头（SVG背景图） */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23aaa" d="M8 12L3 7h10z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}

原理说明 #

Mac版Chrome的原生<select>元素内置的下拉箭头会占用部分水平空间，当字体较大时，剩余空间不足以显示完整文本，导致截断。方案一通过调整内边距给文本留出空间；方案二则完全脱离浏览器原生样式，自定义外观彻底消除跨浏览器差异。

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