WordPress：如何在联系表单 7 生成的输入字段（日期选择器）中处理图标？

Posted 2023-03-05

【中文标题】WordPress：如何在联系表单 7 生成的输入字段（日期选择器）中处理图标？

【英文标题】：WordPress: How to address a icon within a input field (date picker) generated by contact form 7?

【发布时间】：2021-01-31 22:25:12

【问题描述】：

我觉得自己像个初学者。我只是无法用 CSS 解决日期选择器图标。在 DOM 中根本没有这方面的内容。我已经尝试了一些方法，但都没有成功。

我使用 WordPress 主题 "Bridge" 并且已经在 Qode 选项中找到了这个图标。不幸的是，我找不到任何东西。

我从 chrome 开发工具中复制了这个。它实际上是日期选择器所在的完整容器。否: :before, :after 或类似的被发现:

<div class="column1">
   <div class="column_inner">
      <div class="qode-cf-date-holder">
          <span class="wpcf7-form-control-wrap your-date">
              <input type="date" name="your-date" value="2020-10-17" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date required" min="2020-10-17" max="2035-12-31" aria-invalid="false">
          </span>
       </div>
   </div>
</div>

我只想将光标设置为指针 :D。该图标放置在由contact form 7 生成的输入元素内（但我看不出如何）。

这是输入框的截图：

【参考方案1】：

没有视觉参考有点难以回答，但你尝试过吗：

input[name="your-date"] 
  //css here

【讨论】：

我已经尝试过这种方法和许多类似的方法。不幸的是没有成功。我添加了一张图片。 DOM 的部分已经在我的问题中了。

是的，我在全新的 WP 安装上查看了它，这很奇怪。我认为这可能是一个 jquery 库的东西，当然 jquery 正在处理这个问题。如果您在开发工具中将输入类型从日期更改为文本，您会看到它消失了。这暗示了一些东西，但不确定是什么。你可以找到一个可能会给你更多控制权的日期选择器插件。

【参考方案2】：

您必须使用CSS Pseudo-elements。很遗憾，目前html中的输入字段不支持这个功能。

但是您可以在字段的父级中使用此功能。您的代码看起来像这样。 （如果你使用Font Awesome）。

.qode-cf-date-holder 
  position: relative;
  padding-left: 40px;


.qode-cf-date-holder:after 
  position: absolute;
  font-family: 'Font Awesome 5 Pro';
  content: '\f073';
  left: 0;
  top: 0;
  font-size: 16px;
  z-index: 999;

您几乎可以像任何其他 DOM 元素一样设置伪元素的样式，例如，您可以将图像分配给其背景。

【讨论】：

不是很干净（因为我无法删除旧图标）但它可以工作:)，谢谢 :)

干得好。您可以找到带有 inspect 元素 的图标并将display: none 样式分配给它。

问题是我找不到带有检查元素的图标：D