当鼠标离开 Firefox 时，Css 伪类正在更改 select 值

Question

我有有趣的问题要解决。

我正在使用伪类的组合（非常像这里：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 正在更改值...

我不知道为什么。

有什么想法吗？

Answer 1

通常会发生什么

在正常情况下（没有所有这些 CSS 属性）打开 <select> 时，当鼠标经过 <select> 项目时，它们被连续视为 selected（显示蓝色背景）。

如果您点击该项目，它会保持 selected 状态。 <select>关闭，触发JS事件，<select>显示的值就是这个selected项。如果您再次打开 <select>，该项目仍然是蓝色的。

如果在 <select> 打开时单击离开，selected 项目将重置为上一个。

这里发生了什么

该错误来自两个 Firefox 行为的交叉：

当 div::after 内容改变时，div（和他的 children）渲染被重新计算。
A <select> 始终将他的 selected 项目（蓝色背景的那个）视为其当前值。

一步一步：

您单击 <select>，它会打开菜单。
鼠标经过<select>项，被认为是连续selected.
鼠标走出<div>，所以：
- ::after内容已更改
- <div>内容重新计算
- <select>被重置，所以显示为关闭状态
- 并且... 鼠标悬停的最后一个元素仍然是 selected

因此 "visually closed" <select> 将最后一个 selected 项目显示为 selected。没有触发 JS 事件。但是这不仅仅是一个视觉错误。在 Firefox 上，<select> 值 (elem.value) 在鼠标经过其项目时发生变化。

见fiddle

如何修复

这是 Firefox <select> 的行为，除了在 Js 中创建自己的 select 之外，您无能为力。

为了防止<select>在鼠标离开时关闭，删除：

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

当鼠标离开 Firefox 时，Css 伪类正在更改 select 值

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

html

css

firefox

pseudo-class

通常会发生什么

这里发生了什么

如何修复

当鼠标离开 Firefox 时，Css 伪 类 正在更改 select 值

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

html

css

firefox

pseudo-class

通常会发生什么

这里发生了什么

如何修复

当鼠标离开 Firefox 时，Css 伪类正在更改 select 值