2016-07-04 32 views
0

選択タグの選択フィールドに選択した項目のアイコンを追加するにはどうしたらいいですか? したがって、ドロップダウンからアイテムを選択し、その値の横にある最上位のラベル(+386の左)にもアイコンが必要です。 質問はselectでgetフラグを作るための正しい構造体を作る方法です。 選択した項目を選択したフィールドに追加する方法

はありがとう

enter image description here

<div style="white-space:nowrap"> 
    <select class="select_country_dropdown dropdown_arrow"> 
     <option value="+386" class="c_uk">+386</option> 
     <option value="USA" class="c_uk">+386</option> 
     <option value="USA" class="c_uk">+1</option> 
     <option value="USA" class="c_uk">UK</option> 
     <option value="USA" class="c_uk">UK</option> 
     <option value="USA" class="c_uk">UK</option> 
     <option value="USA" class="c_uk">UK</option> 
     <option value="USA" class="c_uk">UK</option> 
     <option value="USA" class="c_uk">UK</option> 
     </select> 
     <input style="border-bottom:none;" type="text" name=""> 
     <label>Phone</label> 
    </div> 

とCSSコード

.select_country_dropdown option { 
    height:25px; 
    width:150px; 
    padding:0 0 0 45px; 
    background-position:5px center; 
    background-repeat:no-repeat; 
} 
.select_country_dropdown{ 
    background-color: transparent !important; 

    text-align: center; 
} 
.country_flag{ 
    background-image: url("/static/images/uk.png"); 
    background-position: left center; 
    background-size: 32px auto; 
} 

.dropdown_arrow{ 
    border: medium none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 2px 2px 2px 2px; 
    border: none; 
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center; 
    background-position: right; 
} 

.c_uk{ 
    background-image: url("/static/images/uk.png"); 
    background-size: 32px; 
} 
+0

を行く例だろうと思いhttp://bug7a.github.io/iconselect.js/

このリンクを参照してくださいhttp://select2.github.io/select2/ – vignesh

答えて

0

あなたはiconselect.jsを使用することができます。アイコン/画像選択(コンボボックス、ドロップダウン)

デモとダウンロード;私はあなたの要件は1

は、このリンクを介して How to add a images in select list

関連する問題