Akki619 Akki619 - 2 months ago 5
CSS Question

Input placeholder using CSS only

I know there are lot's 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.

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

EDIT2: 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"

Answer

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

Comments