0

The calendar picker icon appears disappeared because the background is black and the icon is also black, and I cannot find a way to style it to white, it just gets 'crossed out' on the stylesheet. I'm new to css please advice, thank you. I've contacted the Wordpress theme support, they said they cannot find a way to style it also, it looks like a simple task?

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;

or

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

or

.input {color:white;}

or give it class in the Contact Form html

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

none of these work

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

Please note, the input text is already white, it is the calendar icon that reminds black and I dont' seem to be able to find a class targeting that.

ccfree
  • 7
  • 3

2 Answers2

1

Use this CSS

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

It worked for me and I believe it will work for you too.

Manesh Timilsina
  • 719
  • 1
  • 5
  • 11
0

I assume the icon was generated using a library like font-awesome or something similar since it's WordPress.

You should therefore be able to isolate the icon on it's own by calling "i" in the CSS.

Assuming #datepicker is the actual id of the parent html element, it would look something like this:

#datepicker i {color: #fff;}

If that doesn't work, there might be a css override somewhere, in which case you would add !important to the end of your style, like this:

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

You could also try targeting that specific icon (as opposed to all icons in that form) by calling it's specific class. Usually icons like that have a class of "fa fa-calendar" or something similar. So that would look like this:

#datepicker .fa-calendar {color: #fff;}
straubcreative
  • 167
  • 1
  • 13
  • Thank you for your reply, the first 2 aren't working. I did 'Inspect' it with Chrome but I cannot find the class of that specific icon. Would you be able to find it with this link? The same form is located on the landing page and the 'reservations' page. http://www.themillennium.com.au/ – ccfree Jul 07 '20 at 03:52
  • I've also found the exact icon on font awesome page, tried #datepicker .fa-calendar-o {color: #ffffff!important;} isn't working either. – ccfree Jul 07 '20 at 03:59