Блог

У меня есть обычный элемент управления выбором Html со следующими параметрами:

 lt;form action="/target.php"gt;  lt;label for="cars"gt;Choose a car:lt;/labelgt;  lt;select name="cars" id="cars" style="width: 100px; overflow-x: auto;" multiplegt;  lt;option value="volvo"gt;Long select option.lt;/optiongt;  lt;option value="saab"gt;Saablt;/optiongt;  lt;option value="opel"gt;Opellt;/optiongt;  lt;option value="audi"gt;Audilt;/optiongt;  lt;/selectgt;  lt;brgt;lt;brgt;  lt;input type="submit" value="Submit"gt; lt;/formgt;  

Первый вариант в списке немного длиннее остальных. Когда я выбираю его, я вижу следующий эффект:

Однако, когда я использую горизонтальную полосу прокрутки, чтобы увидеть остальную часть значения, оно выглядит примерно так, как на изображении ниже:

Текст справа полностью потерян (скажем, и передний план, и фон находятся в то время как). Теперь я нажимаю где-то за пределами элемента управления Select, появляется текст, но половина из них выбрана, а остальные нет.

Я попробовал это с помощью другого онлайн-редактора html, и все они ведут себя одинаково. Есть ли способ (любой css), который я могу применить, чтобы после нажатия/выбора опции была выбрана вся опция, а не только ее часть.

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

 option:checked {  width:150px; }  

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