HTML 文本区域更改占位符的位置

Question

我希望我的文本输入区域更大，但占位符文本位于左上角。我该如何实现这个目标？

JSFiddle 就在这里。

<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 随意修改占位符代码。