Как изменить курсор у select && option?

Question

Есть такой пример:

window.addEventListener('mousemove', e => {
  div_1.style.left = e.pageX - div_1.offsetWidth / 2 + 2.5 + "px";
  div_1.style.top = e.pageY - div_1.offsetHeight / 2 + 2.5 + "px";
  div_2.style.left = e.pageX - div_2.offsetWidth / 2 + 17.5 + "px";
  div_2.style.top = e.pageY - div_2.offsetHeight / 2 + 17.5 + "px";

})

window.addEventListener('click', e => {
  div_1.classList.add('active_div_1');
  div_2.classList.add('active_div_2');
  setTimeout(() => {
    div_1.classList.remove('active_div_1');
    div_2.classList.remove('active_div_2');
  }, 500)
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

select:hover,
select:focus,
option:hover,
option:focus {
  cursor: none;
}

body,
html {
  min-height: 100vh;
  background: #272727;
  color: bisque;
}

#div_1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: aqua;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#div_2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  border: 3px solid aqua;
  border-radius: 50%;
  background-color: transparent;
  transition: left 0s 0.5s, top s 0.5s;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.active_div_1 {
  animation: l 0.5s cubic-bezier(0, 0.2, 0.8, 1);
}

.active_div_2 {
  animation: o 0.5s cubic-bezier(0, 0.2, 0.8, 1);
}

@keyframes l {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 35px;
    height: 35px;
    opacity: 0;
  }
}

@keyframes o {
  0% {
    width: 35px;
    height: 35px;
    opacity: 0;
  }
  100% {
    width: 0;
    height: 0;
    opacity: 1;
  }
}

<select>
  <option>Option_1</option>
  <option>Option_1</option>
  <option>Option_1</option>
</select>
<input/>
<div id="div_1"></div>
<div id="div_2"></div>

Все хорошо, но при выборе option курсор появляется.

Как можно убрать его?

Answer 1

Это очень похоже на баг браузера. У меня вот тоже слетает вид твоего курсора после того как побывал в теге select. Можешь написать в поддержу Chrome

body {
  margin: 0;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #272727;
}

html,
select:hover,
select:focus,
option:hover,
option:focus{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E%3Ccircle cx='17.5' cy='17.5' r='16' fill='none' stroke='%236fccdd' stroke-width='3' stroke-miterlimit='10'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5' fill='%236fccdd'/%3E%3C/svg%3E"), auto;
}

.wrapper {
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <select>
    <option>Option_1</option>
    <option>Option_1</option>
    <option>Option_1</option>
  </select>
</div>

БЛОГ НА HUSL

Как изменить курсор у select && option?

Ответы (1 шт):