Remove arrow input type='date'

2020-03-18 01:03发布

问题:

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.

回答1:

Try this:

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


回答2:

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;
}


回答3:

Try this

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


标签: html css input