JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<h1>Placeholder text without using placehilder attribute</h1>
<h2>Using input element - pure css + buggy</h2>
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>

<hr>
<h2>Using div with contentEditable</h2>    
<div class="fakeInput" onClick="this.contentEditable='true';"></div>

CSS

.container
{
    position: relative;
}
input
{
    background: transparent;
}
input:focus + .fakePlaceholder
{
    display: none;
}
.fakePlaceholder
{
    color:gray;
    position:absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
}
.fakeInput
{
    width: 200px;
    height: 21px;
    border: 1px solid #111;
    color: #111;
    padding: 0 5px;
}
.fakeInput:empty:before {
	content: "Enter some text";
    color: gray;
}
.fakeInput:focus:empty:before {
	content: "";
}