How to add selected item in select to selected field

Question

I am struggling, how can I add selected item icon in selected field in select tag. So, I select item from dropdown and I want the icon also in the top label next to the value (left of +386). The question is how to make the right structure to make get flag in select.

Thank you

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

And CSS code

.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;
}

Please refer this link http://select2.github.io/select2/ – vignesh Jul 04 '16 at 09:27 — vignesh, Jul 04 '16 at 09:27

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

You can use iconselect.js; Icon/image select (combobox, dropdown)

Demo and download; http://bug7a.github.io/iconselect.js/

I guess your requirement will be example 1

go through this link How to add a images in select list

edited May 23 '17 at 12:08

Community

1
1

answered Jul 04 '16 at 09:35

kautilya hari

213
1
3
9

How to add selected item in select to selected field

1 Answers1