Как обрабатывать событие, когда выбор опускается, а не при выборе опции

Question

Фон:

У меня есть элемент select с некоторыми опциями, стандартный материал.

Мне нужно выбрать стиль, чтобы стрелка раскрывающегося списка по умолчанию была заменена значком - снова все просто.Я сделал это, используя псевдо-класс :: after контейнера select.

Цвет фона для выбора - красный, а значок выпадающего меню - белый.

У меня есть стандартный обработчик события jQuery "click", связанный с выбором.

Текущее поведение:

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

Событие щелчка срабатывает.

Когда вы выбираете опцию, событие щелчка срабатывает снова.

Ожидаемое поведение:

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

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

Вопрос

Возможно ли это?

Другие комментарии

Большое спасибо

Answer 1

Вы можете использовать события фокусировки и размытия для

let select = document.querySelector('select')
select.addEventListener('focus', (event) => {
select.parentElement.classList.add('color-red');
}
select.addEventListener('blur', ()=>{
if(select.parentElement.classList.contains('color-red'){
select.parentElement.classList.remove('color-red')
}