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剪輯以顯示該選項的最後部分？