Firefox 上的样式占位符

Posted 2023-03-05

【中文标题】Firefox 上的样式占位符

【英文标题】：Styling placeholder on Firefox

【发布时间】：2013-08-26 07:32:07

【问题描述】：

我想要做的是让一个占位符出现在中心顶部 50% 和左侧 50%。它在 Chrome 中似乎很好，但在 Firefox 23 上却不行。我有一个例子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;

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

【参考方案1】：

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

您必须将required 属性放在textarea 上：

<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;

【讨论】：

textarea:not(:invalid) text-align: left; - 这是个好主意！我一直坚持它解决的问题。一个问题是它在不理解 :not(:invalid)

的旧浏览器中无法正常工作

@FAngel 是的，我也这么认为。但是旧版浏览器甚至可以处理placeholder 属性吗？

当然没有，但他们处理textarea text-align:center;，这是个问题。

我可以在不需要属性的情况下以某种方式使用它吗？

@TakácsZsolt 我不这么认为，因为:invalid 选择器

【参考方案2】：

在你的 CSS 中使用填充而不是给出位置：

textarea::-moz-placeholder 
 position: relative;
 font-size: 16px;
 font-style: italic;
 color: #ABABAB;
 padding-top: 50px;
 padding-left:50px;
 text-align: center;


textarea::-webkit-input-placeholder 
position: relative;
font-size: 16px;
font-style: italic;
color: #ABABAB;
padding-top: 50px;
padding-left:50px;
text-align: center;

您可以根据需要调整填充。