html5 - using formatted placeholder for scientific inputs

Question

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 :)!

Answer 1

You can try to use Unicode characters for subscript numbers ("Subscript Codes" section):

<input type="text" placeholder="H&#8322;O" />

See available sub/superscripts table: http://en.wikipedia.org/wiki/Superscripts_and_Subscripts.

Another option (if say some browser doesn't support necessary character) you can always use background image with the text, and hide background on input:focus.

Answer 2

You can style the entire placeholder using css like this

/*For Webkit browsers (Chrome, Safari) */

input::-webkit-input-placeholder {
    /* Your style here e.g. font size, color etc */  
}

/* For Mozilla Firefox */

input:-moz-placeholder {
    /* Your style here e.g. font size, color etc */
}

You can also style some part using :after and :before selectors

//for wbkit browsers
::-webkit-input-placeholder:after {
     content: '*';
}

::-webkit-input-placeholder:before {
     content: '*';
}

//similarly for moz browsers

Another way is to use UTF characters as suggested by @dfsq