CSS フォーム内で文字変換した時に文字が消える！？

そんなバカな....

消えとるぅー

原因は「::selection」

::selectionってのは

selection.css

::selection {
  background: #4f5362;
  color: #FFFFFF;
}

みたいに背景色と文字色を指定したら

普通こうなるのが

こうなる。カッコイイ？

フォーム内で文字変換した時にこの文字色のスタイルがかかるらしい。
なので文字が消えるというよりは、#FFFFFF（白色）になっていんですね。

こうした

フォーム以外にスタイルかかるようにすればいい。

selectionFix.css

:not(input)::selection {
  background: #4f5362;
  color: #FFFFFF;
}

:not()とか初めて使った