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>

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

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

1 个答案: