入力されたテキストに自動的にCSSを適用するcontenteditable

Question

contentedtiableを使用して入力したテキストにtext-transformのようなCSSの影響を無効にする方法はありますか？

テキスト変換が大文字に設定されているため、「証明書プログラム」が表示されます。 実際に入力されたデータは、認証プログラムです。

contenteditableでフィールドに入力すると、追加されたテキストは自動的に大文字になります。

contenteditable CSSをtext-transformに設定します。表示テキストは次のとおりです：証明書プログラムと私は "証明書プログラム"を希望します

表示用にCSS設定を使用できますが、新しく入力したテキストには影響しませんか？今、何が起こっている

：TEXT：認定プログラム、HTML：

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

私が欲しいもの：TEXT：認定プログラム、HTML：

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

Answer 1

あなたがhereを見ることができるように、それは（テキストを編集して、どこかにクリック）テキストを参照してください唯一の方法が変更されるため、元のテキスト値は、text-transformの影響を受けません。

あなたがそのセクションに大文字のテキストを取り除きたい場合は、単にでそれを上書き

私は、あなたが望むものを知っていない質問は、明確ではないが、..：

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

あなたはそれを編集しているときに大文字のテキストを取り除きたい場合は、次の

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

Answer 2

ちょうど例えば、前回のCSSルールを上書き

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