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

Question

我觉得自己像个初学者。我只是无法用 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 生成的输入元素内（但我看不出如何）。

这是输入框的截图：

Answer 1

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

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

Answer 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 元素一样设置伪元素的样式，例如，您可以将图像分配给其背景。