placeholder-shown 의사 클래스

placeholder-shown 의사 클래스는 입력이 시작된 후 사라지는, 소위 힌트 텍스트가 표시되는 인풋 또는 텍스트에리아의 스타일을 지정합니다.

구문

css선택자:placeholder-shown {}

예제

힌트 텍스트가 표시되는 인풋에는 빨간색 테두리를 설정하고, 텍스트를 입력한 후에는 테두리가 녹색으로 변하도록 해봅시다:

html<form>
  <input placeholder="텍스트를 입력하세요">
</form>

cssinput {
  border: 1px solid green;
}
input:placeholder-shown {
  border-color: red;
}

Результат:

참고 항목