JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p class="description">:placeholder-shown CSS 의사 클래스는 현재 자리 표시자 텍스트를 표시하고 있는 input 또는 textarea 요소를 나타냅니다.</p>

<input type="text" placeholder="비밀번호를 입력해주세요">
<label for="">비밀번호를 입력해주세요</label>

SCSS

body {
  margin: 20px;
  font-size: 14px;
}
.description {
  margin-bottom: 20px;
}
input {
  height: 30px;
  border: 1px solid #FF6600;
}
input::placeholder {
  color: transparent;
}
input:placeholder-shown {
  border: 1px solid #000000;
  & ~ label {
    color: #000000;
  }
}
label {
  display: block;
  color: red;
  margin-top: 5px;
}