MathLive分数输入出现白色遮挡问题求助

在深色主题下使用MathLive输入分数时出现的白色矩形遮挡，本质是组件默认的占位符高亮样式和深色背景冲突导致的。你之前尝试的CSS选择器没有命中正确的目标元素，以下是有效的修复方案：

修复步骤 #

1. 添加针对性的CSS样式，覆盖MathLive的默认高亮/占位符背景：

/* 清除占位符的白色背景 */
.ML__placeholder {
    background-color: transparent !important;
}

/* 替换输入时的白色高亮为半透明样式（可选，保留视觉反馈同时不遮挡） */
.ML__highlight,
.ML__selection-highlight {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 确保分数的分隔线区域无额外背景 */
.ML__fraction .ML__fence {
    background: none !important;
}

将这段代码替换你原来的无效CSS规则即可。

2. 清理冗余脚本：你的示例中同时加载了MathJax 3和2.7.5两个版本，这可能引发不必要的样式或脚本冲突，建议只保留其中一个版本的MathJax脚本。

验证效果 #

修改后点击分数的占位符区域输入内容，白色遮挡会消失，同时如果保留了半透明高亮，仍能清晰看到当前输入位置的视觉反馈。

内容的提问来源于stack exchange，提问作者Gabriel