Css pseudo classes are changing select value when mouse leave on Firefox

Question

I have interesting problem to solve.

Im using combination of pseudoclasses (exacly like here: div[data-used="true"]:hover::after) to change content of my after element, when hover like 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>

As you can see, on Firefox, when you choose something, and then you click again on the list but you don't click any new value but hover new value and then leave mouse out of select, select is changing value...

I don't know why.

Any ideas?

Answer 1

What happen usually

In a normal situation (without all these CSS properties) with an opened <select>, when the mouse go over <select> items, they are considered in succession as selected (a blue background is showed).

If you click on the item, it keep this selected state. <select> is closed, JS events are triggered, and the <select> showed value is this selected item. If you open again the <select>, the item is still in blue.

If you click away while the <select> is opened, the selected item is reset to the previous one.

What happened here

The bug come from the crossing of two Firefox behaviors :

• When a div::after content change, the div (and his children) rendering is recalculated.
• A <select> always consider his selected item (the one with a blue background) as its current value.

Step by step :

1. You click on the <select>, it open the menu.
2. The mouse go over <select> items, which are considered in succession as selected.
3. The mouse go out of the <div>, so :
   • ::after content is changed
   • <div> content is recalculated
   • <select> is reset, so showed in its closed state
   • and... the last element the mouse was over on is still selected

So the "visually closed" <select> show this last selected item as selected. No JS events are triggered. But It's not only a visual bug. On Firefox, the <select> value (elem.value) is changed when the mouse go over its items.

See fiddle

How to fix it

It's a Firefox <select> behaviour, you can't do anything against that, except create your own select in Js.

To prevent the <select> to close when the mouse leave, remove :

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