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剪辑以显示该选项的最后部分？