选择被箭头水平剪切的文本

Question

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

​

​

​

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来移除箭头的选项，但我认为在跨浏览器支持方面，保留默认外观会更好。

如何在不增加宽度的情况下修复右侧的文本被截断的问题？如果可能的话，也许可以设计一下卷影dom的样式？

Answer 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>

​