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; }更多推荐
发布评论