CSS只显示<选择>或下拉列表

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>

并通过在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>

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