Question

我很挣扎，如何在select标签的选定字段中添加所选项目图标。所以，我从下拉列表中选择项目，我希望图标也位于值旁边的顶部标签中（左侧为+386）。问题是如何使正确的结构在select中得到标志。

谢谢

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

Answer 1

你可以使用iconselect.js;图标/图像选择（组合框，下拉列表）

演示和下载; http://bug7a.github.io/iconselect.js/

我猜您的要求将是示例1

通过此链接 How to add a images in select list

如何在select到选定字段中添加所选项目

1 个答案: