需要在文本区域的占位符上添加一些 padding-top答案

【问题标题】：Need to add some padding-top on a placeholder of a text area需要在文本区域的占位符上添加一些 padding-top
【发布时间】：2015-01-24 14:47:03
【问题描述】：

我知道如何从这里 css tricks 对占位符进行样式化

但我需要知道如何应用到特定的文本区域。我的文本区域有“消息”类。

谢谢。

实际上我使用了 padding。但是对你使用 css3 seelctor 的占位符样式感兴趣。

有什么帮助吗？

【问题讨论】：

请分享您的代码（HTML 和 CSS）
OP，请看我的最新编辑，我明白你现在想要什么
因为你从我这里得到了答案。
@Gezzasa 根本不是这种情况，请查看您的通知

标签： css placeholder

【解决方案1】：

你可以试试这个。它工作正常且经过测试！！！

<body>
<textarea placeholder = "Enter Your Stuff Here !! Area" class "message"></textarea>
</body>

您可以将 css 添加到类中，如下所示：

.message  {
    padding-top : 12px;
  }

【讨论】：

【解决方案2】：

使用这个 CSS：

textarea {
    padding-top: 14px;
    font-size: 1.0rem;
}

textarea::-webkit-input-placeholder {
    padding-top: 0px;
}

textarea::-moz-placeholder {
    padding-top: 0px;
}

textarea::-ms-input-placeholder {
    padding-top: 0px;
}

【讨论】：

【解决方案3】：

给你的文本区域一个 ID 并用它来分配 css 规则。

例如

(html)

<textarea id="thisOne" style="message">

(css)

#thisOne -moz-placeholder {
   padding: 5px 0 0 0;
}

【讨论】：

虽然这很好，但使用 ID 来定位特定的文本区域，就不需要-moz-。此外，利用类更好

【解决方案4】：

您只需要.message { padding-top: 10px; } 即可获得您想要的结果。

它将适用于任何具有message 类的<textarea>

编辑

如果您不想对元素应用填充，请改用此方法。它实际上只是针对placeholder。

.message::-webkit-input-placeholder {
   padding-top: 10px;
}

.message::-moz-input-placeholder {
   padding-top: 10px;
}

.message:-moz-input-placeholder {
   padding-top: 10px;
}

.message:-ms-input-placeholder {
   padding-top: 10px;
}

可以在这里看到实际操作，我设置了 2 个 <textarea> 来展示这个 - http://jsfiddle.net/andyjh07/tan7k4rf/

【讨论】：

对不起@Gezzasa，不，我真的只是想把它加进去，我没有意识到你在编辑颜色后是一样的。我只是专注于自己的答案
没问题，谢谢。对我来说，这看起来有点可疑。我想通知来得有点晚。道歉。

【解决方案5】：

这就是你要找的东西？

<textarea  placeholder="Placeholder text!" class="message"></textarea>
<textarea  placeholder="Placeholder text!" ></textarea>

.message::-webkit-input-placeholder {padding-top: 10px;}
.message:-moz-placeholder { /* Firefox 18- */padding-top: 10px;}
.message::-moz-placeholder {  /* Firefox 19+ */padding-top: 10px;}
.message:-ms-input-placeholder {padding-top: 10px;}

http://jsfiddle.net/92gnt7qt/3/

【讨论】：

这根本不能回答问题
所以你想要做的就是添加填充？ .message {padding-top: 10px}
这不是我的问题，但 OP 想要填充顶部，这在标题中有所说明。此外，OP 没有指定 10px，这是我选择展示代码如何工作的数量
澄清一下，我原来的回答确实回答了他的问题。 “但是对你用 css3 seelctor 的占位符样式感兴趣。有帮助吗？”我的回答展示了如何使用一类消息来设置特定占位符的样式。这样他就可以将“颜色：红色”更改为他需要的任何颜色。
@AndyHolmes 为什么你会在我的答案之后用正确的信息编辑你的答案？

【解决方案6】：

只需为该类应用 CSS...

.message{padding-top:10px;}

或者

padding:10px;

如果你想在所有边上应用填充

并将其应用于文本区域：

<textarea class="message"></textarea>

【讨论】：