[ CSS ] input[type="date"] 커스텀하기 + :valid 작동 안하는 문제해결

 

---

 

 

 

input[type="date"]의 기본 모양은 아래와 같은 문구와 캘린더 이모지로 이루어져 있다.

 

 

하지만 계정 생성 폼을 만들면서 년/월/일이 아닌 생년월일이라는 문구가 넣고 싶었고 캘린더 이모지도 다른 디자인으로 바꾸고 싶었다.

그러나 css는 역시 쉽지 않은 세계...

일반적으로 적용하는 css코드( placeholder 디자인 변경 )로는 적용이 안되었고 여러 가지 검색해 보고 강의 보면서 커스텀에 성공은 했다.

자주 쓰진 않아서 왠지 까먹을까 봐 정리해 둔다. 🥲

 

 

 

<-- hmtl -->
input( type="date",data-placeholder="생년월일" )

 

 

[ 아이콘 변경하기 ]

	input[type='date']{
     	 // 캘린더 아이콘을 클릭해야만 달력이 보이는데 캘린더의 영역을 조절하기위함
            position: relative;
            // 배경에 원하는 아이콘 삽입
            background: url(아이콘 주소) no-repeat;       
            padding-right: 10px;
            // 글자색 변경
            color: #858585;                        
        }


	// 기본으로 제공되는 달력 이모지 display 없애기 
        // + 기본 값으론 캘린더를 눌러야만 달력이 나왔는데 이 기능도 무력화
        input[type="date"]::-webkit-clear-button,
        input[type="date"]::-webkit-inner-spin-button { 
        	display: none;
        } 
        
        
        // 캘린더 아이콘을 클릭하는 영역을 의미하는 선택자
	// 이 영역을 input의 크기만큼으로 설정(width,heigh 값이 100%)하여
        // input의 어떤 곳을 클릭해도 캘린더를 클릭한 것과 같도록 함
        input[type='date']::-webkit-calendar-picker-indicator {
            position:absolute;
            //왼쪽위에 위치시키고 클릭 영역을 부모(input)의 크기만큼 가짐
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            // 배경과 글자를 투명하게 하여 기존의 아이콘이 없는 것처럼 보여줌
            background: transparent;
            color: transparent;
          }

 

 

[ input의 placeholder 변경하기 ] 

        input[type='date']::before {
        // html의 data-placeholder 속성에서 값을 받아와 content에 삽입 
        // -> placeholder는 작동안하고 data-placeholder로 값을 지정해야함
            content: attr(data-placeholder);
            width: 100%;
        }
        
        
        // 유효값이 입력된 경우 before에 있는 것을 없애준다.
        input[type='date']:valid::before {
            display: none;
        }

 

여기서 중요한 것은 :valid이다.

처음에 아무리 똑같이 css를 짜고 붙여 넣어도

날짜를 입력하지 않았을 때에 ::before가 작동이 안 되고 :valid::before파트가 작동이 되어버렸다.

 

 

공식 문서를 읽고 여러 가지 검색해 본 결과

1. valid는 유효성 검사를 해주고 ture일 경우에 작동이 되고 false 경우엔 작동이 되지 않는다.

2. <input type="date"> 는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않는다.

    -> 아무 값을 입력하지 않을 수도 있고,

         미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력해도 true값을 리턴하는 것

 

즉 이 둘을 조합해 보면 date는 유효성 검사를 하면 항상 true를 리턴하고 그로 인해 :valid::before가 적용된다는 것이다.🥲 ...

 

 

그래서 나는 유효성 검사 속성 중 하나인 required를 사용했다.

이렇게 되면 값이 들어오지 않을 때는 :before 파트의 css가 적용되고 값이 정상적으로 들어가면 :valid::before 파트의 css가 작동이 된다.

 

 

 

 

[ 참고 ]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/date

https://www.youtube.com/watch?v=oyBzRPd9Ur8 

https://jobcoding.tistory.com/202

 

 

 

---