html - Drop down background arrow alignment -

i have assigned background image select in html. image arrow. 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 appearing near end of drop down.

is there way move array left 20px drop down looks better.

i tried adding padding-left:150px hides selected option in select when drop down in closed state.

decrease left position of background image:

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