My date input field doesn't display icon and placeholder on mobile

Question

I'm using a date field in my lwc to use in the community. But it behaves differently between Desktop and Mobile. The placeholder and icon are gone.

Desktop version:

In mobile:

How can I keep the data field looking similar to desktop for mobile? Android and IOS.

    <div class="slds-col slds-size_6-of-12 slds-form-element" style="padding-right: 5px;">
        <div class="slds-form-element__control">
            <lightning-input type="date" name="input8" variant="label-hidden"  onchange={inputCheckInChange} placeholder="Check-in date" value={dataEntrada} min={minchekin} max={maxcheckin} ></lightning-input>
        </div>
    </div>
    <div class="slds-col slds-size_6-of-12 slds-form-element" style="padding-right: 0px;">
        <div class="slds-form-element__control">
            <lightning-input readonly={checkinInvalido} variant="label-hidden" type="date" name="input8"  onchange={inputCheckOutChange}  placeholder="Check-out date" value={dataSaida} min={mincheckout} max={maxcheckout}></lightning-input>
        </div>
    </div>

Answer 1

According to the documentation, the component renders differently on mobile and desktop.

But that's not the root of the problem. If I'm not wrong, on desktop lightning-input renders date fields as <input type="text">. While on mobile it renders as <input type="date">. That leads us to the root. HTML documentation for <input type="date"> states that placeholder is not supported for that type:

I used the following css as a solution for <lightning:input>.

@media (max-width: 640px) {
    .THIS input[type="date"]:before {
        content: 'yourcontent' !important;
    }

    .THIS input[type="date"]:focus:before {
        content: '' !important;
    }

    .THIS input[type="date"] {
        display: flex;
    }
}

Answer 2

Just solved this problem.

input[type="date"] {
        min-width:95.6%;
        -webkit-appearance : none;
        min-height: calc(var(--lwc-heightInput,1.875rem) + (1px * 2) + 24px) !important;
    }

Source: Lightning-input with Type="Date" (LWC) displays different size in mobile and desktop