How to modify date style in html

In HTML, you can use the "::-webkit-datetime-edit" pseudo-element selector to modify the date format. You only need to use this selector to select the element and set the specific style. The specific syntax is: "::-webkit-datetime-edit{property:property-value}".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Type of time selection:

Select date:

Select Time:

Select the week:

Select the month: < ;input type="month" />

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 –

that controls the editing area::-webkit-datetime-edit-fields-wrapper –

::- that controls the year, month and day area webkit-datetime-edit-text – This controls the slash or dash between year, month and day

::-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 space occupied by the four letters of 2017

::-webkit-inner-spin-button – This is the one that controls the up and down arrows

::-webkit-calendar-picker-indicator – This is the one that controls the small drop-down arrow

::-webkit-clear-button – This is the control clear button

The following includes pseudo-elements used for 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-datetime-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::-webkit-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[disabled]{}

input::-webkit-datetime-edit-hour-field[disabled]{}

input::-webkit-datetime-edit-millisecond-field[disabled]{}

input ::-webkit-datetime-edit-minute-field[disabled]{}

input::-webkit-datetime-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 date type changes the row height and height. The small triangle will not adjust according to the size. It is too ugly, so I decided to It hides away.

The following css can remove the upper and lower small 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 with input type date has the following attributes, which can be customized according to your own needs Adjust yourself.

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

Recommended learning: html video tutorial

The above is the detailed content of How to modify date style in html. For more information, please follow other related articles on the PHP Chinese website!