HTML5：文本区域占位符 ::after content css 在 Mozilla 和 IE 中不起作用

Question

我对文本区域占位符有疑问。我需要在我的项目中将占位符显示为 2 行。我使用 placeholder::after css 将占位符显示为两行。但是 Mozilla 和 IE 不支持文本区域的占位符::after css。我怎么解决这个问题。我需要为每个行占位符使用单独的样式。有人说 after 和 before 不适用于文本区域。所以请帮我解决这个问题。

谷歌浏览器运行良好。

在此处查看小提琴...PLACEHOLDER FIDDLE

textarea::-webkit-input-placeholder{
		text-align:center;
		font-size:34px;
		line-height:35px;
	}
	textarea:-moz-placeholder{
		text-align:center;
		font-size:34px;
		line-height:35px;
	}
    textarea::-moz-placeholder{
		text-align:center;
		font-size:34px;
		line-height:35px;
	}
	textarea:-ms-input-placeholder{
		text-align:center;
		font-size:34px;
		line-height:35px;
	}
	textarea::-webkit-input-placeholder::after{
		display: block;
		text-align:center;
		content:"For example, when you last spoke to your customer";
		font-size:20px;
		line-height:20px;
	}
    textarea:-moz-placeholder:after{
		display: block;
		text-align:center;
		content:"For example, when you last spoke to your customer";
		font-size:20px;
		line-height:20px;
	}
	textarea::-moz-placeholder::after{
		display: block;
		text-align:center;
		content:"For example, when you last spoke to your customer";
		font-size:20px;
		line-height:20px;
	}
	textarea:-ms-input-placeholder::after{
		display: block;
		text-align:center;
		content:"For example, when you last spoke to your customer";
		font-size:30px;
		line-height:20px;
	}

<textarea  maxlength="25000" style="margin-bottom: 0px; height: 70px; width: 99%;" placeholder="Start Typing here..." ></textarea>

Answer 1

我很确定多样式占位符不会跨浏览器或跨平台工作，因为它们都是依赖于设备的输入元素。 CSS3 支持仅限于少数属性，伪前/后不是其中之一。这篇文章列出了支持的属性：styling the html5 placeholder

可能的替代方法是在文本区域后面放置一些东西（div）并使文本区域稍微透明，直到被点击或使用图像作为占位符。我知道这两个都很讨厌。