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

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

WordPress: How to address a icon within a input field (date picker) generated by contact form 7?

html

css

wordpress

wordpress-theming

contact-form-7