Как настроить пользовательский курсор при открытом списке select в html?

Question

[Игорь Винокуров]

Для своего сайта настроил пользовательский курсор, добавив стиль:
cursor: url('file.png'), auto;

Но при открытии списка, созданного с помощью <select></select>, этот стиль перестает работать, (причём, для всей страницы), и курсор становится обычным. Попробовал задать этот стиль отдельно для псевдокласса :focus - не помогло. Тут, видимо, что-то принципиально другое.

Как это решить?

Comments

[Ankhena]

Как это решить?

Для начала сделать песочницу с минимумом кода и видимой проблемой на codepen.io

Но есть сомнения: делать какой-то стильный, по дизайнерскому мнению, курсор и оставить нативный select звучит странно.

[Алексей Уколов]

То есть у вас этот кастомный курсор настроен для всей страницы и работает до тех пор, пока вы select не откроете, а потом отваливается полностью, я правильно понял?

[Игорь Винокуров]

Алексей Уколов, да, верно. Если из списка что-то выбираю или просто закрываю, ткнув куда-то в сторону, то курсор снова пользовательский.

[Игорь Винокуров]

Ankhena, я не самый опытный веб программист. Пока вы не написали, я об этом не задумывался. Теперь я, конечно, рассмотрю вариант кастомного дроп листа современными методами. Спасибо, что не поленились написать своё мнение.

Однако ж, мне всё равно жутко интересно, почему select так себя ведёт.

[Ankhena]

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

[Александр]

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

[Игорь Винокуров]

Александр, принято, спасибо.

[Игорь Винокуров]

Ankhena, сорян, что-то я не заметил, как попросил вас сделать всё за меня. Видимо, так на меня повлияло веб-программирование - слишком многое делается implicitly, особенно преобразование типов. Непривычно как-то.

Вообще, я пришёл просто за подсказкой. И получил, спасибо.

[Ankhena]

xt_s_oul, речь вообще о другом.

Давайте объясню, что тут происходит. У части проблем известные решения или они тут ежедневно повторяются, но некоторые без кода не решаются. Кастомные курсоры это не лучшая практика, не любят этого пользователи. Поэтому, проблемы с ними редкие и лично у меня в голове есть только предположения, что происходит и их бы проверить. Для этого нужна песочница, которую обычно делает автор вопроса.

Прикладывать код и песочницу это очень хорошая практика для задающих вопросы. Так ответы будут и быстрее и качественнее.

[Анастасия Foxman]

Средствами css не решите этот вопрос - так как стилизация курсора для элемента при его активации (когда выпадающий список открыт) ограничена и может не поддерживаться большинством браузеров. Это связано с тем, что выпадающие списки часто рендерятся операционной системой, а не браузером, и CSS может не иметь контроля над этими элементами в такие моменты. Так что как вариант - только через JS

Примерно так, но я могу ошибаться - тут все зависит от вашего кода

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<script>
// Получаем элемент select
var selectElement = document.getElementById('mySelect');

// Функция для установки пользовательского курсора
function setCustomCursor() {
    document.body.classList.add('custom-cursor');
}

// Функция для сброса курсора на стандартный
function resetCursor() {
    document.body.classList.remove('custom-cursor');
}

// Слушаем событие фокусировки на элементе select
selectElement.addEventListener('focus', setCustomCursor);

// Слушаем событие потери фокуса элементом select
selectElement.addEventListener('blur', resetCursor);

// Для Firefox, который не поддерживает события focus и blur на элементах select,
// можно использовать события mouseenter и mouseleave
selectElement.addEventListener('mouseenter', setCustomCursor);
selectElement.addEventListener('mouseleave', resetCursor);
</script>