웹 폼을 디자인할 때, 플레이스홀더(placeholder)가 표시되고 있는 빈 입력 필드에만 특별한 스타일을 적용하고 싶은 경우가 있습니다. 이럴 때 CSS의 :placeholder-shown 가상 클래스를 사용하면 됩니다.
이 가상 클래스는 사용자가 아직 값을 입력하지 않아 플레이스홀더 텍스트가 화면에 보이는 상태일 때만 요소를 선택합니다. 즉, 입력이 시작되면 자동으로 해당 스타일이 사라지기 때문에 별도의 JavaScript 없이도 깔끔한 인터랙션을 구현할 수 있습니다.
기본 예제
다음 예제는 :placeholder-shown 가상 클래스를 활용해 입력 필드의 테두리 색상을 변경하는 방법을 보여줍니다.
<!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>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
첫 번째 입력 필드에는 도저 블루(dodgerblue) 테두리가, 두 번째(짝수 번째) 입력 필드에는 올리브 드랩(olivedrab) 테두리가 적용됩니다. 여기서 :nth-of-type(even) 선택자를 함께 사용하여 짝수 순번의 입력 요소만 다른 색상으로 구분한 점이 눈여겨볼 만합니다.
배경색과 함께 활용하기
테두리뿐만 아니라 배경색까지 조합하면 더욱 눈에 띄는 디자인을 만들 수 있습니다.
<!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>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
주목할 점은 세 개의 input 요소 중 오직 플레이스홀더 속성을 가진 이메일 입력 필드에만 주황색 테두리와 파우더블루 배경이 적용된다는 것입니다. 라디오 버튼이나 플레이스홀더가 없는 일반 텍스트 입력 필드에는 스타일이 전혀 영향을 주지 않습니다.
:placeholder-shown 사용 시 참고 사항
- 플레이스홀더 필수: 이 가상 클래스는
placeholder속성이 있는 요소에만 동작합니다. - 입력 시 해제: 사용자가 텍스트를 입력하는 순간 스타일이 자동으로 제거되어, 실시간 피드백 효과를 줄 수 있습니다.
- 브라우저 호환성: Chrome, Firefox, Edge, Safari 등 대부분의 최신 브라우저에서 지원됩니다.
이처럼 :placeholder-shown 가상 클래스를 활용하면 JavaScript 없이도 빈 입력 필드의 상태를 시각적으로 강조할 수 있어, 폼 UX를 개선하는 데 매우 유용합니다.