Style Contact 7 Form calendar picker icon color
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.
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;} 
