ブートストラップ選択矢印をグリフコンに変更するにはどうすればよいですか？

Question

私は矢印を除いて、このような何かを達成したいが、ブートストラップglyphiconアイコンのようになります。

私は本当にこの使用してブートストラップを作る方法がわかりません。私の選択とそれを操作する上で絶対選択側を設定することにより、

<div class="my-select"> 
    <div class="select-side"> 
    <i class="glyphicon glyphicon-menu-down"></i> 
    </div> 
    <select class="form-control" id="sel1"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    </select> 
</div> 

、しかし、私がしよういかに難しいかに関係なく、私はこの青のdiv要素に適合しないことができます。 は、私はこのようにこれを行うにしようとしていました全体の選択の下で国境。その矢印をクリックすると動作しません。

私は今、選択サイドのdivをクリックしてもパネルが開きません。

EDIT2：問題解決、WORKING DEMO：

http://codepen.io/Deathgazeroo/pen/wWWMqJ

Answer 1

のみ.select-sideにpointer-events:none;を追加します。これは、このdivでマウスイベントを防ぐため、あなたは後ろの選択をクリックします：

http://codepen.io/blonfu/pen/EyyPpJ

Answer 2

あなたは、ブートストラップの.input-groupと.input-group-addonクラスを使用してそれを達成することができます。スタイルシートで以下のCSSコードを使用して矢印を非表示にすることができます。以下のコードスニペットです：

select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    text-indent: 1px; 
 
    text-overflow: ''; 
 
}

<div class="input-group"> 
 

 
    <select class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    </select> 
 
    <span class="input-group-btn"><i class="glyphicon glyphicon-menu-down"></i></span> 
 
</div>