CSS only placeholder for contenteditable elements

To the extent possible under law, Kaan Genc has waived all copyright and related or neighboring rights to this content. This work is published from: United States. https://creativecommons.org/share-your-work/public-domain/cc0/

by SeriousBug

HTML

<!--
To the extent possible under law, Kaan Genc has waived all copyright and related or neighboring rights to this content. This work is published from: United States. 

https://creativecommons.org/share-your-work/public-domain/cc0/
-->
<span contenteditable="true" data-placeholder="click on me and type"></span>
<style>
/* Add the placeholder text */
[data-placeholder]::before {
  content: attr(data-placeholder);
  /* Or whatever  */
  color: gray;
}
/* Hide the placeholder when selected, or when there is text inside */
[data-placeholder]:focus::before, [data-placeholder]:not(:empty)::before {
  content: none;
}
</style>

CSS

/* None of this CSS is required for the placeholder, it's all for the demo. */
* {
  box-sizing: border-box;
}

span {
  display: block;
  padding: 2rem;
  margin: 2rem;
  border: 1px solid black;
}