Question

我有一个选择的性别列表。

代码：

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>

我想在下拉列表中使用drop-down-icon.jpeg。

我想添加一个按钮代替下拉图标。

怎么做？

Answer 1

在 Firefox 中，您只需将背景图片添加到选项：

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select>

更好的是，你可以像这样分开HTML和CSS

<强> HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>

<强> CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

在其他浏览器中，唯一的方法是使用一些JS小部件库，例如jQuery UI，例如使用 Selectable 。

从jQuery UI 1.11开始， Selectmenu 小部件可用，非常接近你想要的。

Answer 2

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

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

enter image description here

HTML使用;

<div id="my-icon-select"></div>

Javascript使用;

    var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };

Answer 3

我的解决方案是使用FontAwesome，然后将库图像添加为文本！您只需要Unicodes，它们位于此处：FontAwesome Reference File forUnicodes

以下是一个示例状态过滤器：

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

请注意， font-family：Arial，FontAwesome; 需要按照示例中给出的select样式分配！

Answer 4

针对此问题的另一个jQuery跨浏览器解决方案是http://designwithpc.com/Plugins/ddSlick，它仅用于此用途。

Answer 5

您已经有几个建议使用JavaScript / jQuery的答案。我将添加一个只使用HTML和CSS而没有任何JS的替代方案。

基本思想是使用一组单选按钮和标签（将激活/取消激活单选按钮），并使用CSS控件仅显示与所选单选按钮关联的标签。如果要允许选择多个值，可以使用复选框而不是单选按钮来实现。

这是一个例子。代码可能有点麻烦（特别是与其他解决方案相比）：

＆＃13;

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

＆＃13;

<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="red" id="color-red" />
      <label for="color-red">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="green" id="color-green" />
      <label for="color-green">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="blue" id="color-blue" />
      <label for="color-blue">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="yellow" id="color-yellow" />
      <label for="color-yellow">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="pink" id="color-pink" />
      <label for="color-pink">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="turquoise" id="color-turquoise" />
      <label for="color-turquoise">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
      </label>
    </div>
  </div>
</div>

＆＃13;

Answer 6

在国家，语言或货币中，您可以使用表情符号。

几乎所有支持表情符号使用的浏览器/操作系统都可以使用。

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">&emsp;Netherlands</option>
    <option value="DE">&emsp;Germany</option>
    <option value="FR">&emsp;France</option>
    <option value="ES">&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">&emsp;€&emsp;EUR&emsp;</option>
    <option value="GBP">&emsp;£&emsp;GBP&emsp;</option>
    <option value="USD">&emsp;$&emsp;USD&emsp;</option>
    <option value="YEN">&emsp;¥&emsp;YEN&emsp;</option>
</select>

Answer 7

我尝试了几个基于jquery的自定义选择图像，但没有一个在响应式布局中工作。最后我来到了Bootstrap-Select。经过一些修改后，我能够生成这段代码。

Code and github repo here

Answer 8

对于那些想要显示图标并接受“黑白”解决方案的人来说，一种可能就是使用字符实体：

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

通过扩展，您的图标可以存储为自定义字体。以下是使用字体 FontAwesome 的示例：https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

一个好处是它不需要任何Javascript。但是，请注意加载完整字体不会减慢页面加载速度。

Nota bene： 使用背景图像的解决方案在Firefox中似乎不再起作用（至少在第57版“Quantum”中）：

<select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>

Answer 9

我遇到了同样的问题。我的解决方案是一个单选按钮，右边是图像。由于您只能在广播中选择一个选项，因此它（如）选择。

对我来说很好。希望它可以帮助别人。

Answer 10

对于两色图像，可以使用Fontello，并导入要使用的任何自定义字形。只需在Illustrator中制作图像，保存到SVG，然后将其拖放到Fontello网站上，然后下载自定义字体即可导入。没有JavaScript！

Answer 11

这正在使用ms-Dropdown：https://github.com/marghoobsuleman/ms-Dropdown

数据资源为json。但是您不需要使用json。如果需要，可以与CSS一起使用。

CSS示例：https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

Json示例：http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

脚本

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

Answer 12

不完全是图像，但是我发现最简单的解决方案是在其中添加一些unicode代码，↓对我来说非常有用

Answer 13

更新：截至2018年，这似乎现在可行。在Chrome，Firefox，IE和Edge中进行了测试

<!DOCTYPE html>
<html>
<body>

<style>
select#newlocale option[value="volvo"]   { background-color: powderblue;   }
select#newlocale option[value="opel"]   { background-color: red;   }
select#newlocale option[value="audi"]   { background-color: green;   }
</style> 

<select id="newlocale">
  <option value="volvo"><div >Volvo</div></option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

如何在选择列表中添加图像？

13 个答案: