选择被箭头水平切断的文本答案

【问题标题】：Select text being cut off horizontally by arrow选择被箭头水平切断的文本
【发布时间】：2020-11-17 16:18:22
【问题描述】：

我正在创建一个自定义的 HTML 选择元素，但该元素的文本标签在右侧被箭头截断。

select {
  padding: 4px 8px;
  width: 48px;
  border: 1px solid #4b8df4;
}

select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

<select>
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
</select>

我知道添加 appearance: none 以删除箭头的选项，但我认为在跨浏览器支持方面保持默认外观更好。

如何在不增加宽度的情况下修复文本在右侧被截断？如果可能的话，也许通过设置 shadow dom 的样式？

【问题讨论】：

标签： html css

【解决方案1】：

减小您的padding 或增加您的width 或简单地删除您的宽度。我在这里减少了填充并删除了宽度

select {
  padding: 4px;
  border: 1px solid #4b8df4;
}

select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

<select>
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
</select>

【讨论】：