Input type ="date" 사용시 placeholder 없애기

 

<input type="date"> 형식을 사용하게 되면 볼 수 있는 기본 형식이다. 여기서 연도-월-일 을 없애고 내가 원하는 글씨를 새겨보려고 한다. 

 

 

 

아래의  CSS 코드를 적용하면 달력만 있는 텅빈 input 박스를 만나게 된다. 

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

 

 

그 후 HTML input 태그에 placeholder를 이용하여 원하는 멘트를 써주고 

<input type="date" placeholder="시작 날짜를 입력하세요">

 

아래와 같이 css 처리를 하면 된다. 

 CSS의 가상 요소(::before 또는 ::after와 같은) 내용을 정의하는 content를 이용하고 요소의 속성 값을 가져오는 데 사용되는 attr 함수를 이용한다. 

input[type=date]::before {
  color: #444444;
  content: attr(placeholder); 
}