웹 폼을 디자인할 때 입력 필드의 플레이스홀더(placeholder) 텍스트 색상을 기본 회색 대신 원하는 색으로 바꾸고 싶은 경우가 많습니다. CSS에서는 ::placeholder 가상 요소(pseudo-element)를 사용하면 간단하게 해결할 수 있습니다.
다만 브라우저마다 지원 방식이 다르기 때문에, 크로스 브라우징을 위해 아래처럼 표준 선택자와 함께 인터넷 익스플로러(IE), 엣지(Edge)용 벤더 접두사 선택자를 함께 작성해 주는 것이 좋습니다.
::placeholder— 표준 가상 요소 (크롬, 파이어폭스, 사파리 등 대부분의 최신 브라우저 지원):-ms-input-placeholder— Internet Explorer 10~11 전용::-ms-input-placeholder— 구버전 Microsoft Edge 전용
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
input {
font-size: 40px;
font-weight: bold;
}
::placeholder {
color: rgb(70, 53, 167);
}
:-ms-input-placeholder {
color: rgb(66, 51, 155);
}
::-ms-input-placeholder {
color: rgb(122, 69, 182);
}
</style>
</head>
<body>
<h1>플레이스홀더 색상 변경 예제</h1>
<input type="text" placeholder="Some placeholder text" />
</body>
</html>실행 결과
위 코드를 실행하면 입력 필드에 보이는 플레이스홀더 텍스트가 기본 회색이 아닌 보라색 계열로 표시되는 것을 확인할 수 있습니다 −
추가 팁
플레이스홀더 스타일은 색상 외에도 글꼴 크기, 기울임꼴(font-style), 투명도(opacity) 등 다양한 속성을 조절할 수 있습니다. 또한 일부 브라우저에서는 플레이스홀더의 기본 불투명도가 낮게 설정되어 있으므로, 의도한 색상보다 연하게 보인다면 opacity: 1;을 함께 지정해 주면 됩니다.