我想将选择图标/下拉图标更改为(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) 的解决方案，并进行了轻微改进

\n\n

\r\n

\r\n

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

\r\n

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>\r\n<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>\r\n<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>\r\n\r\n\r\n\r\n\r\n<select class="form-control">\r\n        <option value="">select_option</option>\r\n\r\n        <option value="1">Op\xc3\xa7\xc3\xa3o1</option>\r\n        <option value="2">Op\xc3\xa7\xc3\xa3o2</option>\r\n</select>\r\n<i class="fa fa-chevron-down"></i>

\r\n

\r\n

\r\n

\n\n

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

\n\n

笔记\n在 IE9 中 fa 箭头在前面

\n