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

Question

I feel like a beginner. I just don't manage to address the datepicker icon with CSS. There is simply nothing for this in the DOM. I've already tried a few approaches, but without success.

I use the WordPress theme "Bridge" and have already looked for this icon in the Qode Options. Unfortunately I can't find anything.

I copied this out of the chrome dev tools. It is practically the complete container in which the datepicker is located. No: :before, :after or similar to be found:

<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>

I just want to set the cursor to pointer :D. The icon is placed inside the input element (but I can't see how) that gets generated by contact form 7.

Here is a screenshot of the input field:

Answer 1

You must use CSS Pseudo-elements. Unfortunately, currently the input fields in html do not support this feature.

But you can use this feature in the field's parent. Your code looks something like this. (If you use 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;
}

You can style Pseudo-Elements almost like any other DOM Element, for example you can assign an image to its background.