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

我想知道是否有任何方法可以给所选文本加上正确的填充，但不能移动箭头。

在此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

最佳答案

您是否可以将select width:设置为auto;

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

Updated Fiddle