Question

我在文本区占位符方面遇到问题。我需要在我的项目中将我的占位符显示为2行。我使用占位符::在css后显示占位符为两行。但是Mozilla和IE不支持占位符::在文本区域的css之后。我怎么解决这个问题。我需要为每个行占位符分别设置样式。有人说之前和之后不适用于文本区域。所以请帮我解决这个问题。

谷歌浏览器工作正常。

请参阅此处的小提琴... 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）并使文本区域略微透明，直到单击或使用占位符的图像。我知道这两个都很讨厌。

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

1 个答案: