Contenteditable автоматически применяя CSS к введенному тексту

Question

Есть ли способ отключить влияние CSS, например, преобразование текста на текст, введенный с помощью contentedtiable?

На моей странице отображается «СЕРТИФИКАТНАЯ ПРОГРАММА», поскольку преобразование текста установлено в верхний регистр. Фактические данные были введены: Программа сертификации.

Когда я набираю поле через contenteditable, любой добавляемый текст автоматически вводится в верхнем регистре.

Установка CSS для преобразования текста: нет; не работает, потому что тогда отображается текст: Программа сертификации, и я хочу "ПРОГРАММУ СЕРТИФИКАТА"

Могу ли я использовать мои настройки 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

Как вы можете видеть здесь , исходное текстовое значение не зависит от text-transform, поскольку оно меняет только то, как вы видите текст (отредактируйте текст и затем щелкните где-нибудь).

Я не знаю, что вы хотите, вопрос не так ясен, но ..

Если вы хотите избавиться от заглавного текста в этом разделе, просто переопределите его:

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

Если вы хотите избавиться от текста в верхнем регистре при редактировании:

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

Answer 2

просто переопределяет предыдущее правило CSS, например

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