[CSS] input:focus 일때 placeholder 스타일

인풋에 포커스 되었을 때 플레이스 홀더가 바로 사라지게 하려면 아래와 같이 CSS를 작성해줍니다.

/* lastest version */
input::placeholder {              /* Chrome, Safari, Firefox */
  color: #222;
  opacity: 1;
}
input:-ms-input-placeholder {     /* IE, Edge */
  color: #222;   
  opacity: 1;
}

/* old version */
input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder {
  color: transparent;
}
input:focus::-ms-input-placeholder {
  color: transparent;
}

See the Pen [CSS Tip] input & placeholder by zinee (@zineeworld) on CodePen.