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

【问题标题】：Textarea multiline placeholder but every line has different styleTextarea 多行占位符，但每行都有不同的样式
【发布时间】：2015-12-31 00:21:31
【问题描述】：

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

我尝试了几种方法，但它们都不起作用，有没有办法做到这一点。

【问题讨论】：

您可以发布您尝试过的代码吗？否则，我们没有基础来弄清楚您的问题到底是什么。

标签： html css placeholder

【解决方案1】：

通过为占位符使用伪 CSS 类来实现这一点相当简单：

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

&lt;textarea placeholder="Message" rows="10" cols="50"&gt;&lt;/textarea&gt;

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

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

【讨论】：

哦，-ms-input-placeholder 后面有错字，你是不是把 r 加到最后了？ @TolgaKısaoğulları
我已经添加了 'r' 但它不起作用，我认为是因为内容属性@tom。