Question

我正在尝试创建一个下拉选项列表。用户将选择纸张格式，但我想在名称旁边显示名称的大小，但我希望它标签以便于阅读。是不是很有意思？

<select class="selectpicker">
<option>A4 210x279mm</option>
<option>A5 210x148mm</option>
<option>Letter 216x280mm</option>
</select>

我希望尺寸部分从同一点开始。

Answer 1

如果你的纸张类型没有向左冲洗，你可以正确对齐文字。

select.selectpicker > option {
  text-align: right;
}

要完美对齐像素，您可能需要使用等宽字体。

Answer 2

您实际上并不需要选择。安德烈说没错。您可以使用ul标记并设置li元素的样式，并使用jquery在隐藏的输入字段中填充选定的值，然后相应地处理它。

Answer 3

仅隐藏<select>并根据<select>的内容绘制自己的DOM元素集，并将用户交互传回<select>。这就是所有select syling UI库为过去做的事情......实际上，自从人们想要设置<select>和<option>跨浏览器的样式。

您不会在网络历史中找到一个select样式库，而是以任何其他方式执行此操作。