HTML5 날짜 선택기에 대한 스타일 옵션이 있습니까?

HTML5 날짜 선택기에 대해 정말 놀랐습니다. W3C가 드디어 슬랙의 일부를 포착하고 있으므로 이러한 일반적인 입력 형식을 계속해서 재발 명 할 필요가 없다는 사실을 알게되어 기분이 상쾌합니다.

주의해야 할 점은 대부분의 사이트에서 datepicker를 거래 차단기처럼 사용할 수 있도록 선택기 자체에 색상을 적용하는 방식을 많이 보지 않거나 예견하지 않는다는 것입니다. <select>사람들이 꽤 그것을 만들 수 없다는 단순한 이유에 대한 광범위한 자바 스크립트-교체 해킹을 앓고. W3C 땅에서 무슨 일이 벌어지고 있는지 아는 사람이 있는지 궁금합니다.

이것은 또 다른 더 큰 질문과 다소 짝을 이룹니다 (답을 알고있는 경우) : W3C 또는 WHATWG에 참여하여 이러한 일들 중 일부가 빛을 볼 수 있도록 노력할 가치가 있습니까? 모든 종류의 통찰력이 도움이됩니다.

WebKit은 날짜 입력 텍스트 상자를 사용자 정의하기 위해 다음 8 개의 의사 요소를 사용할 수 있습니다.

::-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
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

따라서 날짜 입력이 더 많은 간격과 우스꽝스러운 색 구성표를 사용할 수 있다고 생각했다면 다음을 추가 할 수 있습니다.

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

현재로서는 기본 날짜 선택 도구를 스타일링하는 스크립트없이 브라우저를 사용할 수있는 방법이 없습니다.

WHATWG / W3C 내부에서 무슨 일이 벌어지고 있는지 ...이 기능이 나타나면 CSS-UI 표준 또는 Shadow DOM 관련 표준이 적용됩니다. CSS4-UI 위키 페이지 목록 CSS3 - UI에서 제외되었지만, 솔직히 말해서 몇 외관 관련 물건은 CSS-UI 모듈에 대한 관심이 많은있을 것 같지 않습니다.

현재 크로스 브라우저 개발을위한 최선의 방법은 JavaScript 기반 인터페이스로 예쁜 컨트롤을 구현 한 다음 HTML5 기본 UI를 비활성화하고 교체하는 것입니다. 나는 미래에 더 나은 네이티브 컨트롤 스타일링이있을 것이라고 생각하지만 아마 자신의 Shadow DOM "위젯"을 위해 네이티브 컨트롤을 교체 할 수있는 능력이있을 것입니다.

이것이 가능하지 않다는 것은 성가 시며 표준 지원을 요청하는 것은 항상 가치가 있습니다. jQuery UI의 리드 가 시도했지만 실패한 것처럼 보이지만 .

이 모든 것이 매우 실망 스럽지만 HTML5 날짜 선택기의 장점과 맞춤 스타일이 어렵고 피해야하는 이유도 고려해 볼 가치가 있습니다. 일부 플랫폼에서는 날짜 선택기 가 매우 다르게 보이며 개인적으로 기본 날짜 선택기를 스타일링하는 일반적인 방법을 생각할 수 없습니다.

Zurb의 github 에서 찾았습니다.

더 많은 커스텀 스타일링을 원할 경우. 다음은 날짜 구성 요소의 웹킷 렌더링을위한 모든 기본 CSS입니다.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

위의 솔루션과 시행 착오를 조합하여이 솔루션을 찾았습니다. 귀찮은 시간이 걸렸으므로 앞으로 다른 사람에게 도움이되기를 바랍니다. 또한 Safari에서 날짜 선택기 입력이 전혀 지원되지 않는 것으로 나타났습니다.

아래 이미지와 같이 투명한 날짜 선택기 입력을 렌더링하기 위해 스타일 구성 요소를 사용하고 있습니다.

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

다음 CSS를 사용하여 입력 요소의 스타일을 지정할 수 있습니다.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

참고로, 내가 좋아하는 특성을 가능 보이지 않았다 달력 아이콘의 색상으로 업데이트하는 데 필요한 color, fill등

나는 결국 일부 filter속성이 아이콘을 조정할 것이라는 것을 알아 냈기 때문에 색상을 만드는 방법을 알아 내지는 못했지만 운 좋게도 아이콘이 어두운 배경에 보이도록 만드는 것이 었습니다. 다음을 수행하십시오.

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

바라건대 이것은 크롬 대부분이 이것이 불가능하다고 직접 말하는 사람들에게 도움이되기를 바랍니다.