Textarea 多行占位符，但每一行都有不同的样式

Question

我想做一个占位符，因为我在下面附上了一张照片

试了几种方法都没有用，请问有什么办法吗

Answer 1

通过使用 pseudo-css-classes 作为占位符来实现这一点相当简单：

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>

不幸的是，您必须为所有浏览器重复代码，使用逗号是行不通的：

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

Textarea 多行占位符，但每一行都有不同的样式

Textarea multiline placeholder but every line has different style

html

css

placeholder