How to change position in Bootstrap dropdown down arrow?

Question

I try to change position in my dropdown down arrow. But can't find any css or anyplace to change this. I trying using background-position-x: ; and it's not working. Hope your help for this. Can I let me know how can I catch this arrow using from separate css class?. Appciate your support!

This sample of screen IMG

This is HTML code

<select class="sb-default-selectbox selectpicker btn-outline-default" 
        data-native-menu="false" 
        data-form="ui-btn-up-a"
        tabindex="-1" 
        style="color: #fff; 
               border-radius: 30px;
               width: 100%; 
               border-color: #fff0; 
               background-color: rgba(255, 255, 255, 0.3); 
               border: none; 
               height: 45px;">
    <option value="NIC">NIC</option>
    <option value="PID">passport</option>
    <option value="DLID">DLID</option>
</select>

Answer 1

Added fa fa icon instead of default icon.

if you want change position of icon, change the below code as you needs.

.fa{
    top: 15px;
    right: 30px;
}

Try this instead,

 .selectpicker{ color: #fff; border-radius: 30px; width: 100%; border-color: #111; background-color:#8f8579; border: none; height: 45px; padding:0 20px; /* remove the original arrow */ -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; position:relative; }.fa{ position: absolute; pointer-events: none; top: 15px; right: 30px; color:#fff; }

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <select class="selectpicker" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <option value="NIC">NIC</option> <option value="PID">passport</option> <option value="DLID">DLID</option> </select> <i class="fa fa-chevron-down"></i>