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.
The code needed
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.
Full code / Example
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!
Top comments (0)