html5에서 입력 유형 날짜의 기본 스타일을 제거하는 방법

html5에서 입력 유형 날짜의 기본 스타일을 제거하는 방법은 다음과 같습니다. 이 기사를 통해 구체적인 소개는 다음과 같습니다.

2. 날짜 및 시간 컨트롤의 스타일을 수정합니다. 현재 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 – 지우기 버튼을 제어합니다

다음은 날짜, 날짜/시간, 주 및 시간에 사용되는 의사 요소를 포함합니다.

 입력::-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{}입력::-webkit-datetime-edit-millisecond-field{}input::-webkit-datetime-edit-min-field{}input::-webkit-datetime-edit-month-field{}input ::-webkit-datetime-edit-second-field{}입력: :-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-min-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[비활성화]{}입력::- webkit-datetime-edit-month-field[비활성화]{}input::-webkit-datetime-edit-week-field[비활성화]{}input::-webkit-datetime-edit-day-field[비활성화]{} 입력::-webkit-datetime-edit-ampm-field[disab led]{}입력::-webkit-datetime-edit-hour-field[비활성화]{}input::-webkit-datetime-edit-millisecond-field[비활성화]{}input::-webkit-datetime-edit- 분 필드[비활성화]{}input::-webkit-datetim e-edit-second-field[비활성화]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }입력::-webkit-calendar-picker-indicator:hover{}

날짜 유형의 행 높이와 높이를 변경하는 작은 삼각형은 크기에 따라 조정되지 않으므로 정말 보기 흉해서 숨기기로 결정했습니다.

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

 입력[유형=날짜]::-webkit-inner-spin-button { 가시성: 숨김 }

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

 ::-webkit-datetime-edit { 패딩: 1px; 배경: url(../selection.gif) }::-webkit-datetime-edit-fields-wrapper { 배경색: #eee; webkit-datetime-edit-text { 색상: #4D90FE; 패딩: 0 .3em }::-webkit-datetime-edit-year-field { 색상: 보라색; }::-webkit-datetime-edit-month-field { 색상: 파란색 }::-webkit-datetime-edit-day-field { 색상: 녹색 }::-webkit-inner-spin- 버튼 { 가시성: 숨김 }::-webkit-calendar-picker-indicator {border: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;배경색: #eee;배경-이미지: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);색상: #666;}

위 내용은 HTML5에서 입력형 날짜의 기본 스타일을 제거하기 위해 에디터가 소개하는 방법입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 답변해 드리겠습니다. 시간에. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!