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

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/

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

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

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

这是一个例子.代码可能有点麻烦(特别是与其他解决方案相比):

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

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

Answer 4

我的解决方案是使用FontAwesome,然后将库图像添加为文本!你只需要Unicodes,它们可以在这里找到:FontAwesome参考文件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; 需要按照示例中给出的选择样式分配!

Answer 5

针对此问题的另一个jQuery跨浏览器解决方案是http://designwithpc.com/Plugins/ddSlick,它正是为了这个用途而制作的.

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>