web-dev-qa-db-ja.com

選択アイコン/ドロップダウンアイコンを（fa-chevron-down）に変更したい。どうやって？

コードのようなフォームを使用したい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>
csshtmltwitter-bootstrapfont-awesome
11
Mo-Alanteh

Font-awesomeの fa-chevron-down ネイティブ（イメージを使用しない）。マークアップにfont-awesomeタグを追加する必要がありますが、かなりクリーンです。

/* 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>
13
Woodrow Barlow

これは、上記のソリューション（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 | Firefox |グーグルクローム

注 IE9ではfa矢印が前にあります

1
Ilídio Martins

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 wilは、画像に背景を追加し、グリフィコンをコントロールしたいもので、パディングと背景の位置を変更するだけで済みます。

0
Tripesdeporc