htmlcsspseudo-elementcss-content

Input placeholder using CSS only

I know there are lots of questions regarding this query here but none of them provide the solution for me.

HTML

<input id="tb1" type="text" class="note" />

<br>
    
<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.

I can't add value attribute to input tag and manage CSS for the desired result. It's the limitation of the system.

Forget about my CSS, is there any way that placeholder text is possible without using placeholder attribute and just with plain CSS for input type="text"

Solution

  • It doesn't work for the simple fact that this:

    <input id="tb1" type="text" class="note"></input>

    is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4