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

Answer 2

我现在偶然发现了这个问题，我尝试了@BlackHatSamurai 提供的解决方案，但没有奏效。

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

我假设您在这里尝试做的是制作一个 textarea，我尝试使用<input type="textarea" placeholder="Message">但占位符始终位于中间。 无论您如何设置它的样式，您都可以使用有限数量的属性设置占位符的样式，请参阅此链接以获取更多信息链接

我在写这篇文章时发现没有<input type="textarea"这样的东西，但是浏览器仍然将它作为<input type="text">呈现给 DOM。 所以我很困惑，花了几个小时调试错误的元素。 您可以在下面的代码段中看到此行为

我通过将<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>