자리 표시자가 있는 입력 텍스트 상자의 스타일을 사용자 지정하기 위해 CSS의 :placeholder-shown 의사 클래스를 사용합니다.
예시
다음 예는 CSS:placeholder-shown pseudo-class를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
