Как центрировать текст в списке выбора

Question

У меня проблемы с оформлением списка выбора в виде HTML. По сути, я хочу, чтобы размер шрифта был 12px, а высота - 30px; Проблема в том, что поле отображается с правой стороны, но рендеринг текста варьируется в зависимости от браузера. В FireFox он отображает его в левом верхнем углу. Я хочу вертикально отцентрировать текст. Кто-нибудь знает способ сделать это или мне нужно сделать что-то нестандартное из ul?

Спасибо

Answer 1

Единственный способ - сбросить <select> и использовать <input type="text"< и <div>, чтобы дать вам точное представление о выбранном списке, но с возможностью сделать все, как это будет <li>, чтоу вас есть в конце.

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

как на изображении ниже

Answer 2

Вы не можете надежно настроить элементы <select>, используя CSS во всех браузерах.

Вам необходимо создать пользовательский элемент управления списком.

Answer 3

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

Answer 4

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

Ура! Я действительно нашел один!

Итак, для любого нового человека, пришедшего найти этот ответ, вот как я этого добился:

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