【问题标题】:Styling placeholder on FirefoxFirefox 上的样式占位符
【发布时间】: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;
}

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

【问题讨论】:

    标签: css firefox placeholder


    【解决方案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;
    }
    

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

    【讨论】:

      猜你喜欢
      • 2014-07-12
      • 2020-02-26
      • 2017-04-07
      • 1970-01-01
      • 2014-08-05
      • 2019-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多