Skip to content

type이 date인 input CSS 조작하는 법

palsa131 edited this page Dec 10, 2021 · 1 revision

css 조작하여 input type="date"의 모양 바꾸기

  ::-webkit-datetime-edit { /* 연도-월-일 부분 전체 */
    padding: 1 em;
  }
  ::-webkit-datetime-edit-fields-wrapper { /* 연도-월-일 부분을 감싼 영역만 */
    background: silver;
  }
  ::-webkit-datetime-edit-text { /* 연도-월-일의 text만*/
    color: red;
    padding: 0 0.3 em;
  }
  ::-webkit-datetime-edit-month-field { /* 연도-월-일 에서 월 부분 text만 */
    color: blue;
  }
  ::-webkit-datetime-edit-day-field { /* 연도-월-일 에서 일 부분 text만 */
    color: green;
  }
  ::-webkit-datetime-edit-year-field { /* 연도-월-일 에서 연도 부분 text만 */
    color: purple;
  }
  ::-webkit-calendar-picker-indicator { /* 달력 아이콘 부분 */
    background: orange; /* url('사진') no-repeat 로 달력의 아이콘 변경 가능 */
  }

아쉬운 점

연도-월-일이 아닌 연도.월.일로 구분자를 바꾸고 싶었는데 현재까지는 방법을 찾지 못했음

Clone this wiki locally