Contenteditable自动将CSS应用于输入的文本

Question

有没有办法禁用CSS的影响，例如文本转换对使用contentedtiable输入的文本？

在我的页面上显示“CERTIFICATE PROGRAM”，因为text-transform设置为大写。 输入的实际数据是：证书计划。

当我通过contenteditable键入字段时，添加的任何文本都会自动为大写。

将contenteditable CSS设置为text-transform：none;不起作用因为那时显示文本是：证书程序，我想要“证书程序”

我可以将CSS设置用于显示目的，但不会影响新输入的文字吗？

现在发生了什么：文本：证书程序，HTML：

<section id="name+degree+96" contenteditable="true">Certificate PrograMS</section>

我想要的：文字：证书程序，HTML：

<section id="name+degree+96" contenteditable="true">Certificate Programs</section>

Answer 1

只是覆盖以前的css规则，例如

section[contenteditable] {
   text-transform: none;
}

Answer 2

正如您所看到的here，原始文本值不受text-transform影响，因为它只会更改您看到文本的方式（编辑文本然后单击某处）。

我不知道你想要什么，问题不是那么清楚，但是......

如果你想摆脱该部分的大写文本，只需用：

覆盖它

section[contenteditable] {
   text-transform: none;
}

如果您想在编辑时删除大写文本：

section[contenteditable]:focus {
   text-transform: none;
}