[CSS] 가상클래스 :placeholder-shown

💡 :placeholder-shown
=> placeholder 텍스트가 '보이는 상태인지 아닌지' 체크할 수 있는 가상클래스 이다.

👀 css만으로 text 입력상태를 컨트롤 해보기 !

• placeholder가 있는 text input을 생성하자.

✍🏻 HTML
<input type="text" class="input-text" placeholder="Your name">
<p class="input-msg">Nice name!</p>

• text를 입력하면 border color , input 밑에 text 가 생성된다.

✍🏻 CSS
  .input-text {
    border: 2px solid black;
  }

  .input-msg {
    color: royalblue;
  }

  /* 입력 전의 placeholder text가 보이는 상태라면 border 색상 gray */
  .input-text:placeholder-shown {
    border-color: gray;
  }

  /* input-msg 의 text도 :placeholder-shown으로 display를 조정해줌. */
  .input-text:placeholder-shown + .input-msg {
    display: none;
  }

✅ 참고 강의 : https://www.youtube.com/watch?v=Zny5Vxqk6Mk (1분코딩)