CSS псевдоклассы изменяют значение select, когда мышь покидает Firefox

У меня есть интересная проблема, которую нужно решить.

Я использую комбинацию псевдоклассов (точно как здесь: div[data-used="true"]:hover::after) для изменения содержимого моего элемента after, Когда hover как здесь: 

select{
  color: #9E9E9E;
  font-size: 16px;
  padding: 12px;
  background: #ffffff;
  border-radius: 4px;
  border: solid 1px;
  border-bottom-width: 3px;
  border-color: #BDBDBD;
  outline: none;
  margin: 4px 8px;
  height: 48px;
  box-sizing: border-box;
  vertical-align: bottom;
  line-height: 21px;
}

select:hover{
  border-color: #03A9F4 !important;
  color: #03A9F4 !important;
  background: #fff !impotrant;
  box-shadow: 0px 0px 6px 1px rgba(33, 150, 243, 0.36);
}

select:first-of-type{
  margin-left: 0;
}

div[data-used="true"]{
  position: relative;
  display: inline-block;
}

div[data-used="true"]::after{
  content: "✓";
  position: absolute;
  padding: 4px;
  background: #FFF;
  width: 15px;
  height: 26px;
  box-sizing: border-box;
  z-index: 1;
  bottom: 2px;
  line-height: 17px;
  text-indent: -9px;
  font-size: 15px;
  color: #8BC34A;
  font-weight: 600;
  left: -1px;
  transform: translateY(-50%);
}

div[data-used="true"]:hover::after{
  content: "✖";
  text-indent: -11px;
  line-height: 17px;
  font-size: 18px;
  color: #2196F3;
  background: #fff;
  font-weight: 400;
}
<div class="req" data-used="true">
  <label>
    <div class="addad-step-box">
      <div class="addad-step">Rodzaj paliwa<sup>*</sup></div>
    </div>
  </label>
  <select id="xyz_paliwo">
    <option>-- wybierz --</option>
    <option>Benzyna</option>
    <option>Diesel</option>
    <option>Benzyna + LPG</option>
    <option>Benzyna + CNG</option>
    <option>Hybryda</option>
    <option>Elektryczny</option>
    <option>Wodór</option>
    <option>Etanol</option>
  </select>
</div>

Как вы можете видеть, в Firefox, когда вы выбираете что-то, а затем снова нажимаете на список, но вы не нажимаете на какое-либо новое значение, но наведите курсор мыши на новое значение, а затем оставьте мышь вне select, select изменяет значение...

Не знаю. почему?.

Есть идеи?

1 4
html css firefox pseudo-class

1 ответ:

Что обычно происходит

В обычной ситуации (без всех этих свойств CSS) с открытым <select>, когда мышь проходит над <select> элементами, они рассматриваются последовательно как выбранные (показан синий фон).

Если вы нажмете на элемент, он сохранит этовыбранное состояние. <select > закрывается, запускаются события JS, и показанное значение <select> является этим выбранным элементом. Если вы снова откроете <select>, Элемент все еще находится в синий.

Если вы нажмете кнопку "прочь" во время открытия <select>, выбранный элемент будет сброшен на предыдущий.

Что здесь произошло

Ошибка возникла в результате пересечения двух типов поведения Firefox:

  • при изменении содержания div::after рендеринг div (и его детей) пересчитывается.
  • A <select> всегда считает свой выбранный предмет (тот, что с синим фоном) своим текущим значением.

Шаг за шагом :

  1. вы нажимаете на <select>, это открывает меню.
  2. мышь проходит над <select> элементами, которые рассматриваются последовательно каквыбранные .
  3. мыши выходят из <div>, так что :
    • ::after содержание изменено
    • <div> содержание пересчитывается
    • <select> сбрасывается, поэтому показан в его закрытом состоянии
    • И... последний элемент, на который была наведена мышь, все еще выбран

Итак "визуально закрытый" <select> показывает этот последний выбранный элемент как выбранный. Никаких событий в JS срабатывает. Но это не только визуальная ошибка. В Firefox значение <select> (elem.value) изменяется при наведении курсора мыши на его элементы.

См. скрипка

Как это исправить

Это поведение Firefox <select>, вы ничего не можете сделать против этого, кроме как создать свой собственный select в Js.

Чтобы предотвратить закрытие <select>, когда мышь уйдет, удалить: 

div[data-used="true"]::after:hover{
    content: "✖";
}
2