Html CSS仅显示部分<；选择>；或下拉列表

我有以下下拉列表：

<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>

+1
阿富汗（+93）
阿尔巴尼亚（+355）
阿尔及利亚（+213）
美属萨摩亚（+1）
...

然而，空间仅限于我；我不能显示这个国家的全名。我想在选择后显示与用户相关的内容。因此，我选择只显示国家代码，将选项的文本和国家重新排列为：

<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>

+1
+93-阿富汗
+355-阿尔巴尼亚
+213-阿尔及利亚
+1-美属萨摩亚
...

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

---

那么，没有javascript，我如何解决这个问题呢？我是否可以将选择列表重新排列到上一个列表，并使用CSS将其剪裁以显示选项的最后一部分？

使用

：在
伪元素之前显示前缀，例如

CSS

HTML


阿富汗
阿尔巴尼亚
阿尔及利亚
美属萨摩亚

通过这种方法，前缀将出现在选项前面，用户将能够通过键盘键入其名称来选择状态
我不理解失去空间或
有限空间
。当未明确设置宽度时，空间或更具体地说，宽度会占用空间。（在这种情况下，它至少会占据最长选项文本的宽度。）这对我不起作用，伙计。选择时，我看到的是国家的名称，而不是其值。此样式不影响当前选项：打开“选择”，您将看到带有前缀的国家列表（在
Fx22
上测试）。我听到了，我选择了美属萨摩亚，我仍然将美属萨摩亚视为所选文本及其各自的宽度，而不是+1。啊。。。我刚刚用Firefox测试了一下，我知道你做了什么。然而，它在Chrome和IE11上不起作用。因此，这是不可能的（对不起，如果没有javascript，这是我最好的主意。不幸的是，我只在唯一支持option元素伪元素的浏览器中进行了测试：\
option:before {
   content: "(" attr(value) ")";
   display: inline-block;
   margin-right: .5em;    
}

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