HTML에서 날짜 스타일을 수정하는 방법

HTML에서는 "::-webkit-datetime-edit" 의사 요소 선택기를 사용하여 날짜 형식을 수정할 수 있습니다. 이 선택기를 사용하면 요소를 선택하고 특정 스타일을 설정할 수 있습니다. "::- webkit-datetime-edit{속성:속성 값}".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

시간 선택 유형:

날짜 선택: d0b8155042013b511075571461c63575

시간 선택: 9cbcb66e19a84dad447545e58aec0d26

주 선택: 32443c6373b12e499ec69bbfc59530ae

월 선택: dcfde6b3bed5314e1624d759a4ec781b

날짜 및 시간 스타일 수정 control

현재 WebKit에는 날짜 컨트롤의 UI를 변경할 수 있는 다음 9개의 의사 요소가 있습니다.

::-webkit-datetime-edit – 편집 영역 제어

::-webkit-datetime-edit -fields-wrapper – 연도, 월, 일을 제어합니다. 이 영역의

::-webkit-datetime-edit-text – 연도, 월, 일을 제어하는 ​​슬래시 또는 대시입니다.

::-webkit. -datetime-edit-month-field – 월이 제어됩니다

::-webkit-datetime-edit-day-field - 특정 날짜를 제어합니다

::-webkit-datetime-edit-year-field - 연도를 제어합니다 2017

네 글자가 차지하는 공간과 같은 텍스트:: -webkit-inner-spin-button - 위쪽 및 아래쪽 화살표를 제어하기 위한 것입니다

::-webkit-calendar-picker-indicator - 이것은 드롭다운 화살표 제어

::-webkit-clear-button - 제어용입니다. 다음

지우기 버튼에는 날짜, 날짜/시간, 주 및 시간에 사용되는 의사 요소가 포함되어 있습니다.

input::-webkit -datetime-edit{}

input::-webkit-datetime-edit-fields-wrapper{ }

input::-webkit-datetime-edit-ampm-field{}

input::-webkit-datetime- 편집일 필드{}

input::-webkit-datetime-edit-hour-field {}

input::-webkit-datetime-edit-millisecond-field{}

input::-webkit-datetime -edit-분-필드{}

input::-webkit-datetime-edit-month- 필드{}

input::-webkit-datetime-edit-second-field{}

input::-webkit- 날짜 시간-편집-주-필드{}

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-min-field:focus{}

input::-webkit-datetime-edit-month-field:focus{}

input::-webkit-datetime- 편집-초-필드:초점{}

input::-webkit-datetime-edit-week -field:focus{}

input::-webkit-datetime-edit-year-field:focus{}

input ::-webkit-datetime-edit-year-field[비활성화]{}

input:: -webkit-datetime-edit-month-field[비활성화]{}

input::-webkit-datetime-edit-week -field[비활성화]{}

input::-webkit-datetime-edit-day-field [비활성화]{}

input::-webkit-datetime-edit-ampm-field[비활성화]{}

input ::-webkit-datetime-edit-hour-field[비활성화]{}

input:: -webkit-datetime-edit-millisecond-field[비활성화]{}

input::-webkit-datetime-edit-min -field[비활성화]{}

input::-webkit-datetime-edit-second-field [비활성화]{}

input::-webkit-datetime-edit-text{}

input::-webkit- inner-spin-button{}

input::-webkit-calendar-picker-indicator{}

input::-webkit-calendar-picker-indicator:hover{}

날짜 유형에 따라 행 높이와 높이가 변경됩니다. .. 작은 삼각형은 크기에 따라 조정되지 않습니다. 너무 보기 흉해서 숨기기로 결정했습니다.

다음 CSS는 날짜의 작은 위쪽 및 아래쪽 삼각형을 제거할 수 있지만 입력 유형이 숫자인 작은 삼각형은 유지합니다.

input[type=date]::-webkit-inner-spin-button { visible: hide; }

입력 유형 날짜가 있는 입력 상자에는 다음과 같은 속성이 있으며 필요에 따라 조정할 수 있습니다.

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

추천 학습: html 비디오 튜토리얼

위 내용은 HTML에서 날짜 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!