I have assigned a background image to the select in html. The image is simply an arrow.
My code is:

```
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; }

```

The arrow is appearing very near to the end of the drop down.

![enter image description here](https://i.stack.imgur.com/2Ye6G.png)

Is there a way to move the array to left by say 20px so that drop down looks better.

I tried adding padding-left:150px but it hides the selected option in the select when drop down is in closed state.