Contenteditable--change background color when editing

Question

When editing an element with the contenteditable attribute I want the background color of that element to change colors. For example, if the element background color was dark grey I would want it to turn white while editing the element and then reset back to dark grey when done editing.

Answer 1

You can use this CSS:

[contenteditable="true"] {
    background-color: grey;
}

[contenteditable="true"]:focus {
    background-color: white;
}

Here's the JSFiddle.

Answer 2

Use something like this.

[contenteditable]:focus {
    background: #fff;
}