Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide the calendar icon in Google Chrome

Tags:

css

sass

Does anyone know how to hide the calendar icon on a date field in Chrome? (input[type="date])

When I look it up I find that I should use "::-webkit-calendar-picker-indicator" but that doesn't seem to do the trick anymore...

like image 480
Tim Van Dijck Avatar asked Sep 11 '19 15:09

Tim Van Dijck


People also ask

How do I change the date format in input?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.


1 Answers

Try something like this

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
<input type="date" class="date-input">
like image 133
Vitor Avanço Avatar answered Oct 05 '22 05:10

Vitor Avanço