Css pseudo-classes change value when mouse leaves Firefox

Question

I have an interesting problem to solve.

Im using a combination of pseudo-classes (like here:) div[data-used="true"]:hover::afterto change the contents of my element afterwhen hoverlike here:

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>

Run codeHide result

As you can see, in Firefox, when you select something, and then you click on the list again, but you don’t click on the new value , but move the new value and then leave the mouse out of the selection , select the change value ...

I do not know why.

Any ideas?

Answer 1

What usually happens

( CSS) <select > , <select> , ( ).

, . <select > , JS , <select> - . <select>, .

, <select > , reset .

- Firefox:

• div::after div ( ) .
• A <select> (, ) .

:

• <select>, .
• <select> , .
• <div>, :
  • ::after
  • <div>
  • <select> - reset,
  • ... , ,

, " " <select> . JS . . Firefox <select> (elem.value) , .

. fiddle

Firefox <select>, , Js.

<select>, , , :

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