i have problem text area placeholder. need display place holder 2 lines in project. using placeholder::after css display place holder 2 lines. mozilla , ie not supporting placeholder::after css text area. how can solve problem. need separate style each line placeholder. 1 saying after , before not work text area. please me resolve this.
google chrome working fine .
see fiddle here...placeholder fiddle
textarea::-webkit-input-placeholder{ text-align:center; font-size:34px; line-height:35px; } textarea:-moz-placeholder{ text-align:center; font-size:34px; line-height:35px; } textarea::-moz-placeholder{ text-align:center; font-size:34px; line-height:35px; } textarea:-ms-input-placeholder{ text-align:center; font-size:34px; line-height:35px; } textarea::-webkit-input-placeholder::after{ display: block; text-align:center; content:"for example, when last spoke customer"; font-size:20px; line-height:20px; } textarea:-moz-placeholder:after{ display: block; text-align:center; content:"for example, when last spoke customer"; font-size:20px; line-height:20px; } textarea::-moz-placeholder::after{ display: block; text-align:center; content:"for example, when last spoke customer"; font-size:20px; line-height:20px; } textarea:-ms-input-placeholder::after{ display: block; text-align:center; content:"for example, when last spoke customer"; font-size:30px; line-height:20px; }<textarea maxlength="25000" style="margin-bottom: 0px; height: 70px; width: 99%;" placeholder="start typing here..." ></textarea>
i pretty multi-style placeholders not work cross-browser or cross-platform device dependant input elements. css3 support limited few properties , pseudo before/after not 1 of them. post lists supported properties: styling html5 placeholder
possible alternatives might place (div) behind text area , make text-area transparent, until clicked on or use image placeholder. both nasty know.
