input type=date then datepicker Icon is not appearing on Firefox

Question

On Firefox, I'm facing an issue, that is datepicker icon is not appearing in the textbox where as it is appearing on Chrome and Edge. Below is the line of code and screenshots please check and let me know what are the ways to show on firefox

<input type="date" required="required" class="formInput">

on chrome icon appears as in this image

on Edge icon appears as in this image

*on Firefox icon disappears as in this image*

Answer 1

I'm able to resolve datepicker icon disappear in input textbox when we use input type="date". It works in Chrome, Firefox, Edge. Below are the css I have used and applied those on divs

 .cal-wrp {
    position: relative;
    background-color: white;
    margin-bottom: 16px;
 }

.btnCal-wrp {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 10;
}

.btnCal-click {
    border: 0.0625rem solid #cfd0d3;
    background-color: transparent;
    width: 100%;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

    .btnCal-click::-webkit-calendar-picker-indicator {
        right: -10px;
        position: absolute;
        width: 78px;
        height: 40px;
        color: rgba(204, 204, 204, 0);
        opacity: 0;
    }

    .btnCal-click::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .btnCal-click::-webkit-clear-button {
        margin-right: 75px;
    }

.btnCal {
    background: transparent;
    border: none;
    color: black;
    padding: 13px;
    position: absolute;
    right: 0;
    top: 0;
}

Calendar textbox code:

<div class="cal-wrp">
   <div class="btnCal-wrp">
        <input class="btnCal-click" type="date" required>
   </div>
   <button class="btnCal"><span class="fa fa-calendar"></span></button>
</div>