Style Contact 7 Form 日历选择器图标颜色

Question

日历选择器图标似乎消失了，因为背景是黑色的，图标也是黑色的，我找不到将其设置为白色的方法，它只是在样式表上被“划掉”。我是css新手，请指教，谢谢。我已经联系了 Wordpress 主题支持，他们说他们也找不到设置样式的方法，这看起来很简单？

the calendar icon supposed to be on the right hand side next to the date

input.wpcf7-form-control.wpcf7-date, input.wpcf7-form-control.wpcf7-number, input.wpcf7-form-control.wpcf7-quiz, input.wpcf7-form-control.wpcf7-text, select.wpcf7-form-control.wpcf7-select, textarea.wpcf7-form-control.wpcf7-textarea{

color:#ffffff;

或

.wpcf7 input[type=”text”]{color:white;}

或

.input {color:white;}

或在联系表格 html 中给它分类

#datepicker {color:white;}

  <div class="one-fourth"> [date* r-date id:datepicker date-format:mm/dd/yy min:today+2days] </div>

这些都不起作用

here's the calendar icon on a picture background so you see what I mean.

请注意，输入的文本已经是白色的，提醒黑色的是日历图标，我似乎找不到针对该的类。

Answer 1

使用这个 CSS

::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
}

它对我有用，我相信它也对你有用。

Answer 2

我假设该图标是使用诸如 font-awesome 之类的库或类似的库生成的，因为它是 WordPress。

因此，您应该能够通过在 CSS 中调用“i”来单独隔离图标。

假设 #datepicker 是父 html 元素的实际 id，它看起来像这样：

#datepicker i {color: #fff;}

如果这不起作用，则可能在某处存在 css 覆盖，在这种情况下，您可以在样式末尾添加 !important，如下所示：

#datepicker i {color: #fff!important;}

您还可以尝试通过调用特定类来定位 那个 特定图标（而不是该表单中的所有图标）。通常像这样的图标有一类“fa fa-calendar”或类似的东西。所以看起来像这样：

#datepicker .fa-calendar {color: #fff;}