如何在Bootstrap下拉箭头中更改位置？

问题描述

我尝试更改下拉箭头中的位置。但是找不到任何CSS或任何地方来更改此设置。我尝试使用background-position-x: ;，但无法正常工作。希望您对此有所帮助。我可以让我知道如何使用来自单独的CSS类的箭头吗？感谢您的支持！

此screen IMG

示例

这是HTML代码

<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,0.3); 
               border: none; 
               height: 45px;">
    <option value="NIC">NIC</option>
    <option value="PID">passport</option>
    <option value="DLID">DLID</option>
</select>

解决方法

添加了 fa fa 图标，而不是默认图标。

如果要更改图标的位置，请根据需要更改以下代码。

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

试试看，

.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>