Firefoxでマウスを離すと、Css疑似クラスが選択値を変更します

debugcn 投稿 Dev

Szymon Pajka

解決すべき興味深い問題があります。

疑似クラスの組み合わせ（正確にはここのように:)を使用して、次のよう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の上で、あなたが何かを選択し、リストを再度クリックけどとき、あなたはどんな新しい値をクリックしていないが、ホバー新しい値をして、選択の外にマウスを残して値を変更している選択し、...

理由はわかりません。

何か案は？

ncoden

通常何が起こるか

<select>が開いている通常の状況（これらすべてのCSSプロパティがない）では、マウスが<select>アイテムの上に移動すると、選択されたものとして連続して見なされます（青い背景が表示されます）。

アイテムをクリックすると、この選択された状態が維持されます。<select>が閉じられ、JSイベントがトリガーされ、表示される<select>値はこの選択されたアイテムです。をもう一度開く<select>と、アイテムはまだ青色のままです。

<select>が開いているときにクリックすると、選択したアイテムが前のアイテムにリセットされます。

ここで何が起こったのか

このバグは、Firefoxの2つの動作の交差に起因します。

場合はdiv::after、コンテンツの変更、div（と彼の子供たち）レンダリングが再計算されます。
<select>いつも彼を検討し、選択し、現在の値としてアイテム（青色の背景色のものを）。

ステップバイステップ：

をクリックすると<select>、メニューが開きます。
マウスは<select>、選択されたと連続して見なされるアイテムに移動します。
マウスが出て行く<div>ので：
- ::after 内容が変更されました
- <div> コンテンツが再計算されます
- <select> リセットされるため、閉じた状態で表示されます
- そして...マウスが置かれた最後の要素はまだ選択されています

したがって、「視覚的に閉じた」に<select>は、この最後に選択されたアイテムが選択されたものとして表示されます。JSイベントはトリガーされません。しかし、それは視覚的なバグだけではありません。Firefoxでは、マウスがアイテムの上に移動すると、<select>値（elem.value）が変更されます。

フィドルを見る

それを修正する方法

これはFirefoxの<select>動作であり、Jsで独自の選択を作成する以外は何もできません。

<select>マウスが離れたときにが閉じるのを防ぐには、以下を削除します。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-1

コメントを追加

サインイン

分類Dev

Related 関連記事

記事