Question

我尝试使用Wordpress中的“联系表单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%}

如果有任何帮助可以解决这个问题，我将不胜感激。

Answer 1

好的，解决了！

更改：

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  text-indent: 35px;

为：

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  padding-left: 45px;

现在它适用于所有平台。

Answer 2

联系表7代码：

$( "tr td:nth-child(6)" ).on("DOMSubtreeModified", function(){
  console.log("changed");
});
let i = 0;
setInterval(function(){ 
    $("tr td:nth-child(6)").text(i);
    i = i+1;
}, 1000);

CSS代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dummytable">
<thead>
  <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
      <th>head 7</th>
      <th>head 8</th>
  </tr>
</thead>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
  ...and so on and so forth....
</table>

本教程的contact form 7 with icon中有更多详细信息

占位符图标在Wordpress中联系表单7

2 个答案: