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

Posted 2023-03-05

【中文标题】HTML文本区域改变占位符的位置

【英文标题】：HTML text area change position of placeholder

【发布时间】：2015-06-05 09:36:57

【问题描述】：

我希望我的文本输入区域更大，但在左上角有占位符文本。我该如何做到这一点？

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>

【问题讨论】：

您确定不想在消息中使用textarea 吗？那么占位符也会在角落里。

【参考方案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 随意修改占位符代码。

【讨论】：

在 Firefox 55 中，占位符不在左上角。

@Tobias 占位符是否可见？即，它是否存在，只是不在角落里？

占位符是可见的。但它是垂直居中的。