我试图使用Wordpress中的”
Contact Form 7″
插件自定义带有占位符图标和文本的联系表单。联系人表单位于我正在使用”
Themify”
主题构建的网站中, 该主题包括”
Font Awesome”
(我想用作占位符图标的矢量图标)。
它在Windows PC和Android移动设备上应显示为：
文章图片
但是, 在Apple移动设备(iPhone和iPad)上, 占位符图标(铅笔)和占位符文本(“ 消息(必填)” )是重叠的。上面的字段(名称, 电子邮件, 主题)的占位符图标和占位符文本显示良好。
我在Contact Form 7插件中的代码是：
<
p>
<
span class="fa fa-user">
<
/span>
[text* your-name placeholder "Your Name (required)"]<
/p>
<
p>
<
span class="fa fa-envelope">
<
/span>
[email* your-email placeholder "Your Email (required)"]<
/p>
<
p>
<
span class="fa fa-folder">
<
/span>
[text your-subject placeholder "Subject"]<
/p>
<
p>
<
span class="fa fa-pencil">
<
/span>
[textarea* your-message placeholder "Message (required)"]<
/p>
[submit "Send"]
CSS样式代码为：
.wpcf7-form input {
border-radius:6px;
/* Makes the edges rounded */
}
.wpcf7-form textarea {
border-radius:6px;
/* Makes the edges rounded */
}
.wpcf7-form .wpcf7-submit {
background:#00a6ca;
/* This edit the button colour */
}
.wpcf7 .wpcf7-text, .wpcf7 .wpcf7-textarea{
text-indent: 35px;
}
.wpcf7 p{ position: relative;
}
.wpcf7 p .fa{
position: absolute;
color: #666666;
z-index: 100;
font-size: 18px;
top: 28%;
left: 1.5%;
}
.wpcf7 p .fa-pencil{ top: 5%;
left: 1.5%}
对于可以解决此问题的任何帮助, 我将不胜感激。
#1 好, 解决了！
已更改：
.wpcf7 .wpcf7-text, .wpcf7 .wpcf7-textarea{
text-indent: 35px;
至：
.wpcf7 .wpcf7-text, .wpcf7 .wpcf7-textarea{
padding-left: 45px;
现在, 它适用于所有平台。
#2 联系表7代码：
[text* your-name "Name"][email* your-email "Email"][text your-subject "Subject"][textarea your-message "Message"][submit "Submit &
#xf1d8;
"]
CSS代码
.wpcf7-submit {
font-family: FontAwesome;
}
【WordPress中的占位符图标Contact Form 7】我从本教程中获得了带有图标的联系表7的更多详细信息
推荐阅读
- 将自定义wordpress文件放在子主题文件夹中，并使get_header和get_footer正常工作
- 在WordPress单个博客文章中的”the_title”之后和”the_content”之前放置一个代码段
- WordPress主题中的PHP”警告include_once()（无法打开流”）
- 用于SCSS的PhpStorm File Watcher无法编译node_modules
- WordPress主题中的PHP链接更改
- CentOS7.7 彻底卸载MySQL5.7
- 什么是Docker?Docker可以干什么?
- 生产环境MAT内存分析流程
- docker