Решение только для CSS для автоматического выбора

Question

По умолчанию выбирается ширина, позволяющая использовать самую широкую опцию. В ситуации с множеством коротких опций и одной длинной, это оставляет массу пробелов при выборе короткой опции.

Есть ли какой-либо способ только для CSS, чтобы выбор принял ширину выбранного параметра?

Answer 1

В какой-то момент вам понадобится JavaScript, чтобы получить то, что вы хотите. Но я думаю, это может помочь вам в некоторой степени. Посмотрите пример на JSBin.

В основном он использует селектор фокусировки для требуемой динамической ширины. Я дал фиксированную ширину элементу select, который затем изменяется в соответствии с самой длинной опцией, когда элемент select сфокусирован.

CSS:

#mySelect { 
    width:70px; 
} 
#mySelect:focus { 
    width:auto; 
}