input[type=date] placeholder 적용하기

input type이 date일때는 placeholder가 적용되지 않는다 

 

그래서 html 태그랑 css에 몇가지 추가로 적어주어야한다!

 

 

HTML

<input type="date" data-placeholder="날짜 선택" required aria-required="true"/>

 

CSS

    input[type='date']::before {
      content: attr(data-placeholder);
      width: 100%;
    }

    input[type='date']:focus::before,
    input[type='date']:valid::before {
      display: none;
    }

 

이렇게 해주면 적용한 플레이스 홀더가 잘 나오는걸 볼 수 있다