How to make a contenteditable <div> look like an <input> element or <textarea>

Webkit browsers (Chrome/Safari) have a very old, and still outstanding, bug (#38943) with the ::selection pseudo-element: they totally ignore the background-color property.

In my answer to How to style the selected text in textareas and inputs in Chrome? on Stack Overflow, I outline that it is possible, to get around this issue using the contenteditable attribute because the ::selection background-color property is not ignored on <divs>. The look of both <input> and <textarea> elements can be can be duplicated with a <div>, contenteditable, and some CSS.

I further expanded the code in my answer in How do I make an editable DIV look like a text field?. The resulting <input> and <textarea> clones look nearly identical to their native counterparts on Chrome, Safari and Firefox. Opera and IE9 don’t look the same, but are still decent.