Style datepicker calendar icon

  • The icon disappears as it is black on a black background, I can’t seem to find a class to target it to change it to white, it seems to be a simple task but none of the below works. Anyone knows the class for that icon, please? As the user would not know there’s an icon to bring the calendar out, it looks broken now, but it isn’t. I’ve tried all the below:

    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

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

    or

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

    or

    #datepicker .fa-calendar-o {color: #ffffff!important;}

    • This topic was modified 4 years, 8 months ago by cecionyi.
    • This topic was modified 4 years, 8 months ago by cecionyi.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hey bro, I had the exact same problem.

    Try this ??

    input[type=”date”] {
    position: relative;
    }

    input[type=”date”]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
    }

    input[type=”date”]:before {
    color: white;
    background: none;
    display: block;
    font-family: ‘FontAwesome’;
    content: ‘\f073’;
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 6px;
    color: #999;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Style datepicker calendar icon’ is closed to new replies.