CSS 仅显示 <select> 或下拉列表的一部分

Question

我有以下下拉列表：

<select>
   <option value="+1">+1</option>
   <option value="+93">Afghanistan (+93)</option>
   <option value="+355">Albania (+355)</option>
   <option value="+213">Algeria (+213)</option>
   <option value="+1">American Samoa (+1)</option>
   ...
</select>

但是，空间对我来说是有限的；我无法显示该国家/地区的全名。一旦选择，我想显示与用户相关的内容。所以我选择通过将选项的文本和国家重新排列为以下内容来仅显示国家代码：

<select style="width: 60px;">
    <option value="+1">+1</option>
    <option value="+93">+93 - Afghanistan</option>
    <option value="+355">+355 - Albania</option>
    <option value="+213">+213 - Algeria</option>
    <option value="+1">+1 - American Samoa</option>
    ...
</select>

并通过在选择上设置宽度。然而，问题是......我刚刚失去了可用性。现在用户不能再使用键盘输入他的国家名称并快速跳转到它。

那么，如果没有 javascript，我该如何解决这个问题？我可以将选择列表重新排列到上一个列表并用 CSS 剪辑它以显示选项的最后部分吗？

Answer 1

使用:before 伪元素来显示前缀，例如http://jsbin.com/erazar/1/edit

CSS

option:before {
   content: "(" attr(value) ")";
   display: inline-block;
   margin-right: .5em;    
}

HTML

<select>
   <option value="+93">Afghanistan</option>
   <option value="+355">Albania</option>
   <option value="+213">Algeria</option>
   <option value="+1">American Samoa</option>
</select>

通过这种方法，前缀将出现在选项前面，您的用户将能够选择通过键盘输入其名称的州