Home > Article > Web Front-end > Add placeholder text to div with contenteditable=\"true\"
You may have come across the contenteditable attribute. It's used in many places. It's a much better alternative to something like a textarea. You can add contenteditable="true" to any div and then it acts like an input field. In this article, I will show you how to add placeholder to text to it as it doesn't support the placeholder attribute right out of the box.
div[contenteditable] { &[placeholder]:empty::before { content: attr(placeholder); z-index: 9; line-height: 1.7; color: #555; word-break: break-all; user-select: none; } &[placeholder]:empty:focus::before { content: ""; } }
That's all the code you need! However, if you only add that to the CSS then it won't work. You need to add a placeholder attribute to your HTML and also ensure that the div is visible.
HTML
<div contenteditable="true" placeholder="Subscribe to Axorax on YT! :D"></div>
CSS
div[contenteditable] { /* Basic styles */ width: 20rem; height: 15rem; padding: 1rem; background: #292929; color: #fff; /* Placeholder code */ &[placeholder]:empty::before { content: attr(placeholder); z-index: 9; line-height: 1.7; color: #555; word-break: break-all; user-select: none; } &[placeholder]:empty:focus::before { content: ""; } }
That's all there is to it. Hope you find it useful!
The above is the detailed content of Add placeholder text to div with contenteditable=\"true\". For more information, please follow other related articles on the PHP Chinese website!