placeholder-shown 의사 클래스
placeholder-shown 의사 클래스는
입력이 시작된 후 사라지는, 소위 힌트 텍스트가
표시되는 인풋 또는 텍스트에리아의 스타일을
지정합니다.
구문
선택자:placeholder-shown {}
예제
힌트 텍스트가 표시되는 인풋에는 빨간색 테두리를 설정하고, 텍스트를 입력한 후에는 테두리가 녹색으로 변하도록 해봅시다:
<form>
<input placeholder="텍스트를 입력하세요">
</form>
input {
border: 1px solid green;
}
input:placeholder-shown {
border-color: red;
}
:
참고 항목
-
입력 필드에 힌트를 지정하는
placeholder속성 -
힌트에 스타일을 지정하는
placeholder의사 요소
