title: Input placeholder using CSS only
body: <p>I know there are lot's of questions regarding this query here but none of them provide the solution for me.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input id="tb1" type="text" class="note" /&gt;
  
  &lt;br&gt;
  
  &lt;p class="note1"&gt; This is not done.&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>p.note1:before{
      content: "Note:";
  }
  
  tb1.note:before{
      content: "Enter your number";
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><strong>EDIT:</strong> I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.</p>
  
  <p><strong>EDIT2:</strong> Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for <code>input type="text"</code></p>