Different fonts for different placeholder values - html

Question

I know how to change the font-family of input and textarea in html. But what I am concerned with is - is it possible for two textarea fields to have fonts different from each other? If yes, then how?
Thanks.

Answer 1

You can style your textarea placeholders differently using a combination selector:
#two:-prefix-input-placeholder
For example will style the placeholder with the id 'two' whilst including the placeholder prefix. See below for an example of this (tested on chrome and IE 11):
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
/***********************/
#two::-webkit-input-placeholder {
color: blue;
}
#two:-moz-placeholder { /* Firefox 18- */
color: blue;
}
#two::-moz-placeholder { /* Firefox 19+ */
color: blue;
}
#two:-ms-input-placeholder {
color: blue;
}
<textarea placeholder="this is some text"></textarea>
<textarea placeholder="this is some text" id="two"></textarea>

Answer 2

You should set two different CSS classes on the textareas. Then you can choose separate fonts for each class in your CSS.

Answer 3

Give your textareas an id
<textarea rows="4" cols="50" placeholder="Some text" id="txtFont1"></textarea>
<textarea rows="4" cols="50" placeholder="Some text" id="txtFont2"></textarea>
Then style them
#txtFont1{
font-family: century gothic;
}
#txtFont2{
font-family: times new roman;
}

Answer 4

You can use different selectors for each input and then target them to apply different fonts in them.
However, be aware that using additional fonts adds loading time to site pages so you should be careful and balance styling and performance.