Question

我正在制作一种语言select，我无法在文本前的option中显示标志。我正在使用twitter bootstrap。那是什么意思呢？我应该用什么方法来添加它们？

<select class="select form-control">
  <option>Lithuanian</option>
  <option>Russian</option>
</select>

我还为标志制作了一个简单的精灵，并制作了一些类来显示它们。

.flag {
  width: 16px;
  height: 11px;
  background:url(../img/flags.png) no-repeat
}

.flag.flag-lt {background-position: -16px 0}
.flag.flag-ru {background-position: 0 -11px}

Answer 1

不可能以这种方式设置标准select控件的样式（我认为因为它实际上是渲染这些控件的操作系统而不是浏览器）。

我认为您最好的选择是使用Twitter Bootstrap的Dropdown插件，该插件使用ul＆amp; li元素，因此您可以根据自己的喜好设置每个项目的内容。您将需要使用隐藏字段＆amp;如果需要将值发布回服务器，则使用JavaScript来管理所选值。

将图像添加到select bootstrap中的选项

1 个答案: