Как решить проблему кастомизации select'a?

Question

[Никита]

Исходные данные: имеется кастомизированный с помощью css select, у которого варианты в выпадающем списке содержат длинный текст, длиннее чем сам select. Кастомизация выполнена в данной технике - wpandyou.ru/tutorials/html-css-jquery/html-css-del...

Проблема: при выборе любого пункта из выпадающего списка, длина которого превышает размер select элемента, текст накладывается поверх стилизованной кнопки (треугольника) в конце элемента.

Хотелось бы спросить совета, есть ли возможность только средствами css решить описанную проблему, или единственным вариантом решения будет использование javascript?

Спасибо.

Answer 1

[GM2mars]

Не отвечу на ваш вопрос, но могу порекомендовать такой селект selectize.js
Возможно он решит ваши проблемы.

Comments

[Никита]

@GM2mars благодарю. за плагин, понравился.

[GM2mars]

Ну это не я его написал ))

Answer 2

[Виталий Киренков]

Поддерживаю @Synoptic , но внесу свои 5 копеек. Плодить дивы нет смысла. Можно на обёрточный див добавить ::after или ::before и расположить его абсолютом.

Answer 3

[Айнур Валиев]

Про кастомизацию селекта тут
phpjs.ru/2017/02/28/customize-select