Question

Is there a way to disable the affect of CSS like text-transform on text entered using contentedtiable?

On my page “CERTIFICATE PROGRAM” is displayed as text-transform is set to uppercase.
The actual data entered was: Certificate Program.

When I type in the field via contenteditable any text added is automatically uppercase.

Setting contenteditable CSS to text-transform:none; doesn’t work because then the display text is: Certificate Program and I want “CERTIFICATE PROGRAM”

Can I use my CSS settings for display purposes, but not affect newly entered text?

What’s happening now: TEXT: CERTIFICATE PROGRAMS, HTML:

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

What I want: TEXT: CERTIFICATE PROGRAMS, HTML:

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

Answer 1

As you can see here, the original text value isn’t affected by text-transform, because it changes only the way you see text (edit the text and then click somewhere).

I don’t know what you want, the question isn’t that clear, but..

If you want to get rid of the uppercase text on that section just override it with:

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

If you want to get rid of the uppercase text while editing it:

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