下拉背景箭头对齐

Question

我已经为html中的select分配了一个背景图片。图像只是一个箭头。 我的代码是：

select {
  font-style: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  -appearance: none;
  background: url("/icons/dropdown_arrow.png") 135px center;
  background-repeat: no-repeat;
  border: 1px solid #cacaca;
  padding: 10px;
  width: 156px;
  border-radius: 4px; }

箭头显示在非常靠近下拉的末尾。

有没有办法将数组向左移动20px，以便下拉看起来更好。

我尝试添加padding-left：150px但是当下拉状态处于关闭状态时它会隐藏选择中的选项。

Answer 1

降低背景图片的left位置：

select {
  font-style: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  -appearance: none;

  background: url("/icons/dropdown_arrow.png") 115px center;
  /*----------------------------------------here-^^^-----------*/

  background-repeat: no-repeat;
  border: 1px solid #cacaca;
  padding: 10px;
  width: 156px;
  border-radius: 4px;
}

Answer 2

对于遇到此问题的人，解决方案在于select元素的属性background-position。我调整了它，并能够将箭头移动到欲望位置