[퍼블리싱] input[type="month"] 의 아이콘 디자인 바꾸기

input 의 기본 달력 아이콘 스타일링하기

---

input 기본 코드를 사용하더라도 아이콘은 바꾸자고 하는 경우가 있습니다. input 스타일을 완전히 변경 하는 것이면 아예 퍼블리싱 코드를 바꿔도 되지만 그렇지 않고 기본 input 을 사용하고자 할 경우에는 사실 스타일링 할 수 있는 것이 많지 않습니다. 그리고 실제로 input 기본을 사용하는 것이 가장 좋습니다. 다시 한번 스타일링 하게 되면 로딩 시간도 잡게 되고 쓸데 없는 코드와 js가 나오게 될 수도 있습니다. 그러면 기본 input 에서 달력 아이콘은 어떻게 바꾸면 될까요?

원하는 디자인

원래 기본 input	변경되는 디자인

기본 css 스타일링

input[type="month"]::-webkit-clear-button,
input[type="month"]::-webkit-inner-spin-button { 
    display: none;
} 
input[type="month"]::-webkit-calendar-picker-indicator { 
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    top: -1px;
    right: 5px;
    background: url("../../img/common/dateBtn_02.png") no-repeat center right;
}

다만 위의 방법은 type="month"가 크롬과 엣지이상의 브라우저에서만 적용되기 때문에 하위 익스플로러에는 사용할 수 없습니다. 사실 요즘에는 윈도우10도 이제 지원이 안되기 때문에 크게 문제가 될 건 없습니다. 그렇다면 기본 스타일에서 위처럼 달력 아이콘 모양만 변경해서 하는 것이 좋지 않을까요?

B2C 사이트가 아니고 B2B 사이트라면 디자인을 어느정도 배제하는 스타일링이 더 좋은 것이 아닐까 합니다. UI 스타일을 하면서 생각한 것은 외국의 책들을 보게 되면 기본 코드를 배제하지 않고 가급적이면 기본 코드를 사용하라고 말하지만 우리나라의 경우에는 대부분이 디자인이 중요해서 기본 코드를 사용하는 경우가 많지 않습니다. 만일 B2B의 경우라면 이런 달력 아이콘을 변경 할 수 있다는 것을 미리 알고 있으면 또하나의 케이스를 추천해 줄 수 있으니 알아두면 좋을 것 같습니다.