Home >Web Front-end >HTML Tutorial >How to modify date style in html

How to modify date style in html

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-06-07 15:15:255518browse

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}".

How to modify date style in html

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

Type of time selection:

Select date:d0b8155042013b511075571461c63575

Select Time: 8b00edaad681f04094ce7f7fa6e370ed

Select the week: 32443c6373b12e499ec69bbfc59530ae

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn