联系表 7 中的占位符 - Wordpress答案

【问题标题】：Placeholder in Contactform 7 - Wordpress联系表 7 中的占位符 - Wordpress
【发布时间】：2014-08-10 04:15:33
【问题描述】：

我正在为我的客户创建一个网站，但我遇到了问题。我已经使用 Contact Form 7 在 wordpress 中制作了一个联系表单。这个插件非常易于使用，但是当我想使用插件的占位符属性时，它在我加载页面时没有显示占位符。

这就是我在 Contactform 7 中设置占位符的方式

[text* your-name placeholder "Name"]

占位符标签适用于我的文本区域，但不适用于上面的文本框。有人可以向我解释我在这里做错了什么吗？

编辑

当我使用 Google Chrome 检查元素并检查文本框时，它说它有一个占位符。但它不显示占位符。

【问题讨论】：

[text* first-name placeholder "Name"] 在我的一种形式中工作正常。你使用的是什么浏览器？如果您查看页面源代码，HTML 输入是否有 placeholder 属性？例如，我的生成<input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name" />。
[text* text-291 placeholder "Your Hobbies"] 在我的本地主机中非常适合我
@Hobo 我使用的是谷歌浏览器，但我也在 Firefox 中测试过
好的，所以这不是兼容性问题。那么placeholder 属性是否出现在页面源（Chrome 中的Ctrl-U）中，就像它对我一样（见上文）？
占位符文本是什么颜色的？

【解决方案1】：

你可以像这样添加一个占位符。

[text* full-name placeholder "Full Name"]

如果占位符不再显示，请为占位符指定样式，如下所示：

form input::placeholder{color: #9C9898; font-size: 14px;}

【讨论】：

【解决方案2】：

如果有人尽管按照上面的其他答案正确编写了所有内容，但仍然遇到此问题，这是我的问题的解决方案。

主题中的代码隐藏了占位符，它与联系表 7 无关。

解决了我的问题的 CSS 代码：

input::placeholder {
    color: #9c9c9c;
    opacity: 1;
}

【讨论】：

【解决方案3】：

如果您使用的是类或 id 属性。只需执行以下操作：

[text* your-name class:form-control id:name placeholder "Enter Name"]

【讨论】：

【解决方案4】：

[text* your-name placeholder "Name"] 检查联系表单设置后，您给出的语法是正确的。因为我也使用与您的语法相同的语法，所以它在我的联系表格中正常工作。

【讨论】：

【解决方案5】：

如果有人对此有疑问，可能是您使用了 class: 或 id: 属性。

当我添加占位符在所有这些之后，它对我有用：

[email* your-email id:your-email class:form-control placeholder "ex. Jon.Smith@email.com"]

【讨论】：

【解决方案6】：

很简单。你可以像这样添加占位符：

[text* first_name placeholder"First Name"]

【讨论】：

【解决方案7】：

同样的问题，然后我更改输入背景颜色，占位符文本在背景白色上是白色的......

所以我建议尝试改变背景输入颜色来测试：

input[type="text"], textarea {
  background-color : #d1d1d1; 
}

【讨论】：