해당 프로젝트에서는 input type이 date인 경우에 원하는 placeholder가 나타날 수 있도록 해야했다. 즉, placeholder를 커스텀해야 한다는 것이다.
근데, text처럼 placeholder를 추가한다고 간단하게 해결되는 것이 아니었다..
placeholder 커스텀 (before를 활용)
::before에 content 속성을 사용하여 date-placeholder라는 속성을 만들어준다.
그리고 해당 태그(.md-date-input)가 focus되거나 valid될 때, placeholder를 안보이도록 display: none을 해주면 된다.
input 태그 안에 date-placeholder 속성으로 원하는 값을 넣어주면 된다.
이때, input 태그에 꼭!!!! required를 작성해주자. 해당 속성이 있어야 값을 입력했을 때 placeholder가 안보이게 된다.
webkit으로 placeholder 없애기
이거는 placeholder 커스텀하는 방법을 찾다가 발견한 것인데, 나중에 쓸 수 있으므로 같이 적어둔다.
webkit을 dateTime과 calender를 수정할 수 있다.
상세 내용은 참고란을 확인하자.
참고
CSS:input type=date, placeholder 적용
input date placeholder 없애기, value색 변경
Comments