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

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