html5 - using formatted placeholder for scientific inputs

I was Creating an WebApp which requires to take Percentages of various Chemicals like (HCl[Hydrochloric acid], NaOH[Sodium Hydroxide] etc) as Input from User.

So Here is what I'm Doing to do that in HTML:

<input type='text' value='' name='hcl' placeholder='Enter HCl%' />

and this works fine in most of the cases, But Now My Client have an requirement of Entering Percentage of Chemicals like H₂SO₄, SiO₂ etc.

So Here is what I've Used for that:

<input type='text' placeholder='H<sub>2</sub>O' />

Fiddle

But with No Success.

---

So Now I have a question:

How can we Format placeholders of html input to show Formatted Text like the one mentioned here?

---

I know the possible solution to this scenario is:

Use label outside of <input> which will have that formatted text inside it like:

<label for='h2o'>Enter H<sub>2</sub>O% :</label><input id='h2o' type='text' />

Fiddle and also I'm using this approach right now;

---

But Still I'm curious in knowing can it be done with placeholders too?

Using CSS or CSS3?

If not Then using JS?

Any suggestions are welcome.

Hope Experts will help me with this. Thanks in advance :)!