css - HTML5:文本区域占位符::在内容 css 之后在 Mozilla 和 IE 中不起作用

Question

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

Google Chrome 浏览器运行良好。

在这里查看 fiddle ... 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) 并使文本区域稍微透明，直到单击或使用图像作为占位符。我知道这两个都很讨厌。