Виправити коректне відображення select2 дропдауна

HTML та CSS верстання — неправильно зазначені категорії?

Проєкт перекладено автоматично. Увійдіть або зареєструйтесь, щоб побачити оригінал

Плагін використовується в адмінці AdminLTE2 v.4 (побудована поверх bootstrap5) https://adminlte.io/

потрібно, щоб дропдаун коректно розфарбовувався в обох режимах data-bs-theme="light" і data-bs-theme="dark"

тобто в чорному режимі був чорний фон і білий текст

в атачі тестовий приклад

Проблема виникла при переведенні проекту https://github.com/leon-mbs/zstore на новий бутстрап з вбудованою темною темою

Попередня версія adminlte (з bs4) використовувала свій темний режим і там все само працювало

Можна поміняти (або перескладати) css, головне, щоб було зрозуміло, які змінні або стилі потрібно змінити в реальному проекті.

Для спрощення зміни можна вставити в тег <style> в <body>

Може є якісь адекватні альтернативні рішення, що додають пошук в html select тег

Виконавець повинен розуміти, що робить - ніякого ІІ-байдлокодингу

Ставки 31 Обговорення 2

Кирилл Монастырный

2 0

Проєкти -
Оцінка -
Рейтинг 702

Бюджет: 700 UAH Термін: 1 день

Добрий день.
Для коректної роботи Select2 з data-bs-theme="dark" у Bootstrap 5 потрібно правильно зв'язати CSS-змінні самого плагіна з змінними бутстрапа. Стандартна тема select2-bootstrap5 цього не робить автоматично, оскільки вона статична.

Щоб ви могли завершити це самостійно, ось план дій:

Потрібно використовувати селектор атрибута [data-bs-theme="dark"] як батьківський для всіх стилів Select2.

Всередині цього селектора необхідно переопределити властивості background-color, color і border-color для класів .select2-selection, .select2-dropdown і .select2-search__field.

Для виділених елементів списку (.select2-results__option--highlighted) також потрібно примусово задати змінні кольору фону і тексту через var(--bs-primary).

Вам потрібно створити окремий CSS-файл або блок, який буде перекривати стандартні стилі плагіна саме в темному режимі.

Хочете, щоб я прописав цей блок стилів цілком, або спробуєте самі реалізувати прив'язку до змінних за цією логікою?

Андрій Шевчук

10 0

Проєкти 10
Оцінка 4.8
Рейтинг 2 541

Бюджет: 700 UAH Термін: 1 день

Леоніде, тут проблема не в select2 як такому, а в конфлікті тем Bootstrap 5/AdminLTE та його стилів. Я можу швидко знайти, які змінні або селектори ламають light/dark, і дати рішення, яке прозоро працюватиме в обох режимах. Мав справу з кастомізацією адмінок на Bootstrap та підгонкою third-party CSS без «костилів». Якщо хочете, спочатку покажу, що саме міняти у вашому прикладі.

Андрей К.

1 296 1

Проєкти 1 300
Оцінка 5.0
Рейтинг 105 011

Бюджет: 1500 UAH Термін: 1 день

Здравствуйте. Працюю з JavaScript більше 9+ років. Готовий до співпраці.

Олексій Мироненко

19 0

Проєкти 20
Оцінка 5.0
Рейтинг 3 554

Бюджет: 700 UAH Термін: 1 день

Привіт, Леоніде! 👋

Готовий допомогти з налаштуванням оформлення випадаючого списку в AdminLTE2 (версії на Bootstrap 5) для коректної підтримки data-bs-theme="light" і data-bs-theme="dark".

Ознайомився з завданням. Проект зрозумілий: потрібно, щоб дропдаун коректно перемикав кольори в обох режимах — в темній темі мати темний фон і білий текст — і щоб було зрозуміло, які CSS-змінні або стилі змінювати (включаючи варіант з вставкою стилів у