HTML文本區域佔位符的更改位置

Question

我希望我的文本輸入區域更大，但佔位符文本位於左上角。我該如何做到這一點？

JSFiddle is here.

<form name="myForm" class="infocontent"> 
    <input data-role="none" type="email" class="inputEmail required" name="email" placeholder="EMAIL"/> </br></br> 
    <input data-role="none" type="text" class="inputMessage messageHeight required" name="message" placeholder="MESSAGE" style="width:400px; height:100px;"/> </br> </br> 

    <div id="load"></div> 
    <input data-role="none" type="submit" name="submit" class="submit" value="submit"/> 
</form> 

Answer 1

你可以用僞元素和CSS這樣做，但你必須做一個對每個瀏覽：

::-webkit-input-placeholder { /* WebKit browsers */ 
 

 
    position: absolute; top: 0; left: 0; 
 
    position:0 0; 
 
    height: 100px; 
 
    width:400px; 
 
} 
 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 

 
    position: absolute; top: 0; left: 0; 
 
    position:0 0; 
 
    height: 100px; 
 
    width:400px; 
 
} 
 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 

 
    position: absolute; top: 0; left: 0; 
 
    position:0 0; 
 
    height: 100px; 
 
    width:400px; 
 
} 
 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
 

 
    position: absolute; top: 0; left: 0; 
 
    position:0 0; 
 
    height: 100px; 
 
    width:400px; 
 
}

<form name="myForm" class="infocontent"> 
 
     <input data-role="none" type="email" class="inputEmail required" name="email" placeholder="EMAIL"/> </br></br> 
 
      <input data-role="none" type="text" class="inputMessage messageHeight required" name="message" placeholder="MESSAGE" style="width:400px; height:100px;"/> </br> </br> 
 

 
      <div id="load"></div> 
 
      <input data-role="none" type="submit" name="submit" class="submit" value="submit"/> 
 
      </form>

上面的例子可以讓您可以使用CSS修改佔位符代碼，不過您喜歡。