下拉背景箭头对齐答案

【问题标题】：Drop down background arrow alignment下拉背景箭头对齐
【发布时间】：2015-07-10 11:06:48
【问题描述】：

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

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 但是当下拉菜单处于关闭状态时它会隐藏选择中的选定选项。

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

我把它设为 5px 仍然箭头不动。任何jsfiddle请
@Sandeep 提供你自己的 JSFiddle 可以整改。

【解决方案2】：

对于那些面临这个问题的人，解决方案在于选择元素的属性背景位置。我调整了它并能够将箭头移动到所需的位置

【讨论】：