3

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!

4

2 回答 2

3

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;
}
于 2013-08-23T10:17:46.370 回答
0

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.

于 2013-08-23T09:44:14.947 回答