Add a placeholder text for contenteditable elements

If you have a <div contenteditable="true" aria-placeholder="example"></div>, the placeholder would not work as in the regular input or textarea. To support it on all contenteditable elements we need to add a bit of CSS:

[contenteditable=true]:empty:before {
  content: attr(aria-placeholder);
  display: block; /* For Firefox */
}

via Ariel Flesler

Tweet