html - 选择菜单填充但不移动下拉箭头

Question

我想知道有什么方法可以为所选文本提供正确的填充，但不能让箭头移动。

在此 html 中，我将右内边距设置为 15px，它采用包括下拉箭头在内的内边距。我真正需要的是，在箭头和所选选项之间留出一点空间(因为选项文本太长，它现在位于箭头下方，这就是为什么我需要在箭头和所选选项之间留出一些空白)

这是我的代码

HTML

<select>
    <option>An Option xvcxbxcvb cvn cvncvnb</option>
     <option>An Option xvcxbxcvb cvn </option>
</select>

CSS

select {
    line-height: 30px;
    padding:9px 15px 9px 9px;
    width:150px
}

Fiddle

Answer 1

你能不能把 select width: 设置成 auto;

select {
  line-height: 30px;
  padding:9px 15px 9px 9px;
  width:auto;
}

Updated Fiddle