Question

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

＆＃13;

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

＆＃13;

Answer 1

这是一个本地使用字体真棒fa-chevron-down的解决方案（不使用图像）。它确实要求你在标记中添加一个字体很棒的标签，但它相当干净。

＆＃13;

/* 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;
}

＆＃13;

<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">...</select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <i class="fa fa-chevron-down"></i>
        <label for="exampleInputEmail1">Some-text</label>
        <select class="form-control input-lg">...</select>
        <i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您必须添加一个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将为你的图像添加一个背景，然后你只需要修改填充和背景的位置，你想要在你的控件中使用glyphicon。

Answer 3

这是基于上述解决方案（Woodrow Barlow）的解决方案，具有轻微改进

public class A{
    public static void main(String[] args) {
           B m ;//Caught is getting printed if declare above try-catch()
        try {
            B m = new B();//Here Uncaught exception is throws
        } catch (java.lang.NoClassDefFoundError ex) {
            System.out.println("Caught!");
        }
    }
}

class B{

}

    /* 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;
   }

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

注意在IE9中，fa箭头位于前面

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

3 个答案: