如何使用css删除文本高亮颜色

Question

我正在构建一个注释编辑器，在该编辑器中，所有内容都是按块构造的，因此当用户选择多个块时，我将在类似于notion.so的块的框容器上显示一个蓝色覆盖，但我要做的是，当我显示蓝色覆盖时，我想要删除文本的突出显示颜色(当您选择文本时，蓝色的突出显示)，我尝试了用户选择none，但是在类添加之后，它没有工作，我也尝试了-webkit-tap-highlight-color，但它似乎也不起作用。

演示：https://www.awesomescreenshot.com/video/4910570?key=905d37aa5750ac2ef7055097c33b6f2b

沙箱：https://codesandbox.io/s/react-playground-forked-vgel5?file=/Paragraph.js

import React from "react";

import { Popover } from "antd";
import GrabMenu from "../GrabMenu/GrabMenu";

import grabIcon from "../../icons/noteeditor/grab-icon.svg";
import { useSelected, useSlateStatic } from "slate-react";
import showSelectedHalo from "../../utils/showSelectedHalo";
import getClassNameForStyling from "../../utils/getClassNameForStyling";

const Paragraph = (props) => {
  const selected = useSelected();
  const editor = useSlateStatic();

  return (
    <div {...props.attributes} className="paragraph-block block">
      <div className="grab-icon-container" contentEditable={false}>
        <img
          src={grabIcon}
          className="grab-icon"
          onClick={props.clearSelection}
        />
      </div>
// The blue overlay
      <div
        className={
          showSelectedHalo(editor, selected, props.element) || props.allSelected
            ? "block-selected-halo block-selected"
            : "block-selected-halo"
        }
        contentEditable={false}
      ></div> 
// Text
      <p className={`${getClassNameForStyling(props).trim()}`}>
        {props.children}
      </p>
    </div>
  );
};

export default Paragraph;

Answer 1

如果要在任何地方隐藏蓝色，请使用以下规则：

::selection {
  background-color: transparent;
}

希望这能帮上忙。