我试图使用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 回答
好的,解决了!
更改:
至:
现在它适用于所有平台 .