Решение проблемы padding для select option в Chrome

Быстрый ответ

Чтобы решить проблему неработающих отступов в элементах <option> в Google Chrome, можно воспользоваться плагином jQuery select2. Этот плагин предлагает пользовательский выпадающий список, позволяющий обойти ограничения браузера:

<select class="select2-style">
    <option value="1">Стилизованный вариант 1</option>
    <option value="2">Стилизованный вариант 2</option>
</select>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.select2-style').select2(); // Инициализация select2
    });
</script>

Стилизуйте список, придающий классу .select2-style соответствующие отступы. Таким образом, Chrome будет корректно отображать ваш выпадающий список.

Упрямство браузеров

Не всегда браузеры последовательно поддерживают все функции CSS. Так, Chrome руководствуется внутренним стилем (стилем агента пользователя), который имеет приоритет над пользовательскими стилями и ограничивает настройку внешнего вида определенных элементов, в частности, option.

Внедрение CSS-свойств, таких как -webkit-appearance: none;, -moz-appearance: none; или appearance: none;, не влияет на поведение браузера: он продолжает игнорировать отступы в <option>.

Визуализация

Вы хотели бы видеть отступы в опциях элемента <select> в браузере Chrome, но взаимодействие со стилизацией складывается так:

Отступы в опциях Select
------------------------

Вы: "Давай сделаем эти варианты немного живее, а? 🛏️"
HTML: "Без проблем, дружище! Скоро добавлю отступы для <select>! 🎨"
Chrome: "Не в моем скрипте! 📏"

Chrome упорно придерживается своего оригинального подхода, стремясь поддерживать простоту и понятность.

Стилизация элементов select

Кастомизация стрелки выпадающего списка

Chrome предоставляет возможность кастомизации стиля стрелки выпадающего списка. Примените -webkit-appearance: none; на <select> и поработайте над вашим творческим видением:

.select-style {
    -webkit-appearance: none;
    /* Ваши идеи для уникального дизайна */
}
.select-style + .custom-arrow {
    /* Проявите творчество при стилизации стрелки */
}

Подробнее об этом расскажет наш спикер на видео

Использование текстового отступа

Вы можете создать иллюзию отступа с помощью свойства text-indent: 5px;, применимого к <select>, для генерации имитированного отступа:

.select-style {
    text-indent: 5px;
    /* Дополнительные стили для полноты образа */
}

Замена <select> и <option> на ul и li

Для обеспечения универсальности отображения во всех браузерах возможно заменить <select> и <option> на ul и li с помощью JavaScript для управления выбором.

Оригинальный подход с изменением размера шрифта

Можно увеличить размер шрифта в <option> посредством font-size. Это добавит комфорта для восприятия и улучшит интерактивность:

.option-style {
    font-size: 1.2em; /* Большие шрифты для лучшей читабельности */
}

Создание искусственных отступов с помощью высоты

Свойство height с применением функции calc обеспечивает создание вертикального отступа:

.select-style {
    height: calc(2em + 10px); /* Добавляем "скрытые" 10px отступа */
}

Обход проблем

Оптимизация размера шрифта

Комбинация font-size-adjust: 0.3 с font-size: 2em поддерживает стабильный визуальный размер элементов <option>, обеспечивая одинаковое отображение в различных браузерах.

Учитываем ограничения Webkit

Признайте, что в Chrome и других Webkit-браузерах существуют стилистические ограничения для тегов <option>. Наиболее вольно можно стилизовать только шрифты. Требуется немного терпения!

Полезные материалы

1. Стилизация веб-форм – MDN — Руководство по подробной настройке форм.
2. Как стилизовать <select> с помощью CSS? – Stack Overflow — Различные подходы и обсуждения на тему стилизации.
3. W3Schools Tryit Editor — Песочница для экспериментов со стилями <select>.
4. Can I use... Поддержка HTML5, CSS3, и др. — Ресурс, информирующий о совместимости реализованных функций с браузерами.
5. Стилизация веб-форм с помощью CSS в подходе SitePoint — Лучшие практики для стилизации веб-форм.
6. Создание доступных форм – Аксессуары для управления формами — Гайд по созданию доступных веб-форм.
7. Фоновые шрифты для стабильной типографики — CSS-Tricks — Ваши знания шрифтов оказывают большее влияние на конечный результат, чем вы могли бы думать!