Textarea multiline placeholder but every line has different style

Question

I want to do a placeholder as I have attached a photo below

I have tried a few way but they didn't work, Is there any way to do like that.

Can you post your code that you tried? Otherwise we don't have a base to figure out what your problem really is. — CodeLikeBeaker, Dec 30 '15 at 16:01

vigonotion · Accepted Answer · 2015-12-30T16:21:31.977

3

It's fairly simple to achieve that by using pseudo-css-classes for the placeholder:

textarea::-webkit-input-placeholder {
    /* design first line here */      
    font-size: 2em;
}

textarea::-webkit-input-placeholder::after {
    /* design second line here */
    display:block;
    content:"Please note that we do not work...";
    font-style:italic;
    font-size: .6em;
    margin-top: 20px;
}

<textarea placeholder="Message" rows="10" cols="50"></textarea>

Unfortunately, you have to repeat the code for all browsers, using commas won't work:

textarea::-webkit-input-placeholder { code... }
textarea:-moz-input-placeholder { code... }
textarea::-moz-input-placeholder { code... }
textarea:-ms-input-placeholder { code... }

edited Dec 30 '15 at 16:21

answered Dec 30 '15 at 16:07

vigonotion

1,164
2
10
21

Oh, had a typo after -ms-input-placeholder, did you add the r to the end? @TolgaKısaoğulları – vigonotion Dec 30 '15 at 16:22
I already added 'r' but it didn't work, I think because of content property @tom. – Tolga Kısaoğulları Dec 30 '15 at 16:24

Textarea multiline placeholder but every line has different style

1 Answers1