CSS HTML select 选项中的格式使用字体真棒

Question

我在 HTML 中有一个沼泽标准 select 列表，我想将其用作列表框。

当前代码如下：

    <select size="20" style="font-family: Arial, FontAwesome; width: 200px;">
        <option value="1">&#xf00d; icon-master</option>
        <option value="2">&#xf2b9; address-book</option>
        <option value="3">&#xf042; adjust</option>
        <option value="4"> air-freshener</option>
        <option value="5">&#xf015; icon-home</option>
        <option value="6">&#xf018; icon-road</option>
    </select>

这确实有效，但我遇到了一两个问题。

这是它在屏幕上的样子：

我说一两个可能是一回事。看看图标大师和地址簿的图像，它们的宽度不同。是否可以对其进行格式化以便所有文本都排成一行？

终于没有空气清新剂的图了，请问这个也可以这样格式化吗？

Answer 1

我会将图标用作伪元素，使用它们的 unicode 加载它们，如“f2b9”并给它们一个宽度。这样即使没有图标，他们也会有 space。

option:before {
  content: "";
  width: 20px;
  display: inline-block;
  font-family: FontAwesome;
  text-align: center;
}

option.cross:before {
  content: "\f00d";
}

option.default:before {
  content: "\f2b9";
}

<script src="https://use.fontawesome.com/53b22dcfd4.js"></script>

<select size="20" style="width: 200px;">
    <option value="1" class="cross">icon-master</option>
    <option value="2" class="default">address-book</option>
    <option value="3" class="default">adjust</option>
    <option value="4">air-freshener</option>
</select>

JSFiddle Example

CSS HTML select 选项中的格式使用字体真棒

CSS formating in HTML select options using fontawwesome

html

css

font-awesome