Hiding arrow from date input

Question

I'm trying to hide extra information and arrows from a date input but it is not hiding in Chrome browser, it does hide in IE.

I'm using the following CSS and cannot see any error.

input[type=date]:-webkit-datetime-edit,
input::-webkit-inner-spin-button,
input::-webkit-clear-button {
    display: none;
}

does this help: https://stackoverflow.com/a/22306944/1059101 — Jai, Jan 13 '20 at 11:53

score 0 · Accepted Answer · answered Jan 13 '20 at 12:00

You can try this:

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

Or you can include a class in HTML for example .remove--arrow and try this:

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

Hiding arrow from date input

1 Answers1