Html5 - использование форматированного заполнителя для научных материалов

Я создавал WebApp, который должен принимать проценты различных химических веществ, таких как (HCl [ Hydrochloric acid], NaOH [Sodium Hydroxide] и т.д.) в качестве ввода от пользователя.

Итак, вот что я делаю для этого в HTML:

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

и это отлично работает в большинстве случаев, но теперь у моего клиента есть требование ввести процент химических веществ, таких как H ₂ SO ₄, SiO ₂ и т.д.

Итак, вот что я использовал для этого:

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

Fiddle

Но без успеха.

Итак, у меня есть вопрос:

Как мы можем отформатировать placeholders из html input, чтобы отобразить форматированный текст, подобный указанному здесь?

Я знаю, что возможное решение для этого сценария:

Используйте label вне <input>, который будет иметь этот отформатированный текст внутри него, например:

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

Fiddle, а также я использую этот подход прямо сейчас;

Но все же мне интересно узнать, можно ли это сделать и с заполнителями?

Использование CSS или CSS3?

Если нет, то используя JS?

Любые предложения приветствуются.

Надежда Эксперты помогут мне в этом. Заранее спасибо:)!

Ответ 1

Вы можете использовать символы Unicode для номера индексов (раздел "Подстрочные коды" ):

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

Ответ 2

Вы можете создать весь заполнитель, используя css, как это

/*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 */
}

Вы также можете создать некоторую часть, используя: after и: before selectors

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

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

//similarly for moz browsers

Другим способом является использование символов UTF, как предлагается @dfsq