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