CODEWITHSUNDEEP
htmlcssplaceholder
Tolga Kısaoğulları
Tolga Kısaoğulları

Reputation: 638

Textarea multiline placeholder but every line has different style

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

enter image description here

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

Upvotes: 1

Views: 972

Answers (1)

vigonotion
vigonotion

Reputation: 1164

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... }

Upvotes: 3

Related Questions