How to remove the default style of input type date in html5

How to remove the default style of input type date in html5. Here is a detailed introduction through this article. The specific introduction is as follows:

2. Modify the style of the date and time control. Currently, there are the following 9 pseudo-elements under WebKit that can change the UI of the date control:

 ::-webkit-datetime-edit - controls the editing area ::-webkit-datetime-edit-fields-wrapper - controls the year, month and day area ::-webkit-datetime-edit-text - controls the year, month and day A slash or dash between ::-webkit-datetime-edit-month-field – controls the month::-webkit-datetime-edit-day-field – Control the specific day::-webkit-datetime-edit-year-field - control the year text, such as the area occupied by the four letters of 2017::-webkit-inner-spin-button - this is the control of the small up and down arrows:: -webkit-calendar-picker-indicator – This controls the drop-down arrow::-webkit-clear-button – This controls the clear button

The following includes pseudo-elements used by date, datetime, week, and time:

 input::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -day-field{}input::-webkit-datetime-edit-hour -field{}input::-webkit-datetime-edit-millisecond-field{}input::-webkit-datetime-edit-minute-field{}input::-webkit-datetime-edit-month-field{}input ::-webkit-datetime-edit-second-field{}input: :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:focus{}input::-webkit -datetime-edit-day-field:focus{}input::-webkit-dateti me-edit-hour-field:focus{}input::-webkit-datetime-edit-millisecond-field:focus{}input::-webkit-datetime-edit-minute-field:focus{}input::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[disabled]{}input::- webkit-datetime-edit-month-field[disabled]{}input::-webkit-datetime-edit-week-field[disabled]{}input::-webkit-datetime-edit-day-field[disabled]{} input::-webkit-datetime-edit-ampm-field[disab led]{}input::-webkit-datetime-edit-hour-field[disabled]{}input::-webkit-datetime-edit-millisecond-field[disabled]{}input::-webkit-datetime-edit- minute-field[disabled]{}input::-webkit-datetim e-edit-second-field[disabled]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}

The small triangle that changes the row height and height of the date type will not adjust according to the size. It is really ugly, so I decided to hide it.

The following css can remove the upper and lower triangles in the date, but retain the small triangle whose input type is number.

 input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

The input box whose input type is date has the following attributes, which can be adjusted according to your own needs.

 ::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); }::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }::- webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }::-webkit-datetime-edit-year-field { color: purple; }::-webkit-datetime-edit-month-field { color: blue; }::-webkit-datetime-edit-day-field { color: green; }::-webkit-inner-spin- button { visibility: hidden; }::-webkit-calendar-picker-indicator {border: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;background-color: #eee;background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);color: #666;}

The above is the method that the editor introduces to you to remove the default style of input type date in HTML5. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!