我想将选择图标/下拉图标更改为（fa-chevron-down）。我怎样才能？

Question

我想使用来自 bootstrap 的代码中的表单，但我想将选择图标/下拉图标更改为 fa-chevron-down。

<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"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Heading</h2>
      <div class="form-group">
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
      </div>
    </div>
  </div>
</div>

Answer 1

这是一个原生使用 font-awesome 的 fa-chevron-down 的解决方案（不使用图像）。它确实需要您在标记中添加一个很棒的字体标签，但它相当干净。

/* remove the original arrow */
select.input-lg {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
  float: right;
  margin-top: -30px;
  margin-right: 5px;
  /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
  pointer-events: none;
  /* everything after this is just to cover up the original arrow */
  /* (for browsers that don't support the syntax used above) */
  background-color: #fff;
  padding-right: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<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"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Heading</h2>
      <div class="form-group">
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
          <option value="option-3">Option 3</option>
        </select>
        <i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

Answer 2

这是基于上述解决方案 (Woodrow Barlow) 的解决方案，并进行了轻微改进

    /* remove the original arrow */
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none; 
        background-color: #92ceea!important;
     }

    select::-ms-expand {
        display: none;
    }

    select + i.fa {
        float: right;
        margin-top: -26px;
        margin-right: 10px;
        /* this is so when you click on the chevron, your click actually goes on the dropdown menu */
        pointer-events: none;
        /* everything after this is just to cover up the original arrow */
        /* (for browsers that don't support the syntax used above) */
        background-color: transparent;
        color:black!important;
        padding-right: 5px;
    }

   select option{
       padding-right: 21px;
   }

<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="form-control">
        <option value="">select_option</option>

        <option value="1">Opção1</option>
        <option value="2">Opção2</option>
</select>
<i class="fa fa-chevron-down"></i>

浏览器兼容性 Safari 5.1.7 | IE9 |火狐 |谷歌浏览器

注意 在 IE9 fa 箭头在前面

Answer 3

你必须添加一个 CSS 文件（你在页面的头部链接）并为这个类指定一个背景图片：

.row > .col-sm-6 > form-group > .form-control-input-lg
{
  background: url(images/example.gif) no-repeat scroll 0px 0px;
  padding-left:0px;
}

这个 css 将为您的图像添加背景，并且您只需通过您希望控制字形图标的那些修改填充和背景位置。