Firefox上的样式占位符(Styling placeholder on Firefox)

Firefox上的样式占位符(Styling placeholder on Firefox)

我想要做的是让占位符出现在中心50％顶部和50％左侧 。 它似乎在Chrome中很好，但在Firefox 23上却没有。我在这里有一个例子。 我的风格在这里：

textarea::-moz-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; top: 50%; text-align: center; } textarea::-webkit-input-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; top: 50%; text-align: center; }

如果有人能提供帮助，我将不胜感激，谢谢！

What I want to do is to make a placeholder appear on the center 50% top and 50% left. It appears to be good in Chrome but not on Firefox 23. I have an example here. and my styles here:

textarea::-moz-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; top: 50%; text-align: center; } textarea::-webkit-input-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; top: 50%; text-align: center; }

I would appreciate if anyone could help, Thanks!

最满意答案

我尝试了一些奇怪的东西，但这似乎适合： 看到这个jsFiddle

您required在textarea上放置required属性：

<textarea placeholder="Placeholder" required="required"></textarea>

这是CSS ：

textarea { height: 300px; width: 300px; /* center the text by default */ text-align:center; resize: none; } /* align the text left when insert */ textarea:focus {text-align: left;} /* textarea not empty will have text align left */ textarea:not(:invalid) {text-align: left;} /* remove the red shadow of firefox if textarea is empty */ textarea:invalid {box-shadow: none;} /* hide the placeholder on focus */ textarea:focus::-moz-placeholder {opacity: 0;} textarea::-moz-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; /* the main trick to center the placeholder vertically */ line-height:300px; } textarea::-webkit-input-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; line-height: 300px; /* keep the placeholder centered under chrome */ text-align: center; }

I tried some weird stuff, but that seems to fit : See this jsFiddle

You will have to put the required attribute on you textarea :

<textarea placeholder="Placeholder" required="required"></textarea>

Here is the CSS :

textarea { height: 300px; width: 300px; /* center the text by default */ text-align:center; resize: none; } /* align the text left when insert */ textarea:focus {text-align: left;} /* textarea not empty will have text align left */ textarea:not(:invalid) {text-align: left;} /* remove the red shadow of firefox if textarea is empty */ textarea:invalid {box-shadow: none;} /* hide the placeholder on focus */ textarea:focus::-moz-placeholder {opacity: 0;} textarea::-moz-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; /* the main trick to center the placeholder vertically */ line-height:300px; } textarea::-webkit-input-placeholder { position: relative; font-size: 16px; font-style: italic; color: #ABABAB; line-height: 300px; /* keep the placeholder centered under chrome */ text-align: center; }