Can't set position of background in IE 10 or L

Question

Here is my code; you can see the image for description. I have tried many things but in vain.

CSS for my drop down:

.customSelect {
    background: url("../images/menu-arrow-down.png") no-repeat 170px center !important; 
    background-position: center center !important;
    width:250px;

    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 11px 5px 7px 5px;
    color: #393939;
    opacity:1;
    -moz-appearance: none;
    -webkit-appearance: none; 
    padding-right: 4.5em;
    background: linear-gradient(#F7F7F7, #F2F2F2) repeat scroll transparent;
    background: -webkit-gradient(linear, 0% 100%, from(#F7F7F7), to(#E2E2E2));
    background: linear-gradient(#F7F7F7, #f2f2f2 );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#f2f2f2',GradientType=0 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F7F7F7', EndColorStr='#f2f2f2')";
    border: none;
    z-index:0;
}

Answer 1

Not sure what your problem is ?

However if its the two arrows instead of one when on the refinance tab just remove the r9, tab works for me...

so remove

<span class="r9-dropdown-icon"></span>

I'm sure this is not what your after, if not please explain in better.