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>

- Lil-Kim

---

你确定不想使用textarea来进行信息输入吗？这样placeholder就会在角落里面了。 - s3lph

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自由地修改占位符代码。

- BlackHatSamurai

---

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

@Tobias 占位符是否可见？也就是说，它是否存在，只是不在角落里？ - BlackHatSamurai

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

Answer 2

我现在遇到了这个问题，我尝试了@BlackHatSamurai提供的解决方案，但没有起作用。

我把它放在这里，以防有人像我一样傻，仍然在寻找答案。

我假设你在尝试制作一个文本区域，我尝试使用<input type="textarea" placeholder="Message">，但占位符总是在中间。无论如何你样式化它，你只能用有限的属性来样式化占位符，请参见此链接获取更多信息link。

当我写这篇文章时，我发现根本没有<input type="textarea"这样的东西，但浏览器仍将其呈现为DOM中的<input type="text">。所以我感到困惑，花了几个小时调试错误的元素。您可以在下面的片段中看到这种行为

我通过将<input type="textarea" placeholder="Message">替换为<textarea placeholder="Message"></textarea>来解决这个问题。默认情况下，占位符设置在元素的左上角。

input[type="textarea"],
textarea {
display:block;
  width: 15rem;
  height: 15rem;
}

Input:<input type="textarea" placeholder="Message">
Textarea:<textarea placeholder="Message"></textarea>

- jameandreu