Styling placeholder on Firefox

后端 未结 2 1813
情书的邮戳
情书的邮戳 2021-01-14 13:40

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.

相关标签:
2条回答
  • 2021-01-14 14:38

    Use padding in your css instead of giving positions:

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

    you can adjust the padding according to the need.

    0 讨论(0)
  • 2021-01-14 14:44

    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;
    }
    
    0 讨论(0)
提交回复
热议问题