Remove arrow input type='date'

Question

I want to remove the right arrow from input type date. I want to let is work on mobile too.

Here is exactly want I want to remove:

What i've tried

<input type="date" class="unstyled" />

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

On desktop it doesen't appear..but on android devices appears.

Answer 1

Solution for both android and web:

.unstyled {
    -webkit-appearance: none;
}
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Answer 2

Try this

`.DatePickerInput::-webkit-inner-spin-button,
 .DatePickerInput::-webkit-calendar-picker-indicator {
     opacity:0;   
    -webkit-appearance: none;
 }`

Answer 3

Try this:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}