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, чтобы отобразить последнюю часть этой опции?