HTML <input> 요소의 placeholder(자리 표시자) 텍스트를 CSS로 꾸미고 싶다면 가상 요소(pseudo-element)를 대상으로 선택해야 합니다. 이때 사용하는 것이 바로 콜론 두 개(::)로 표기하는 CSS 가상 선택자입니다.
placeholder 텍스트가 있는 기본 input 요소
먼저 일반적인 input 요소에 placeholder 텍스트를 넣어 보겠습니다.
<input type="text" placeholder="Hello there!">별도의 스타일을 적용하지 않으면 브라우저 기본 스타일에 따라 아래와 같이 회색으로 표시됩니다.
CSS 적용하기
이제 ::placeholder 가상 요소 선택자를 사용해 placeholder 텍스트 색상을 빨간색으로 바꿔 보겠습니다.
input::placeholder {
color: red;
}적용 결과는 다음과 같습니다.
이처럼 ::placeholder 선택자를 활용하면 색상뿐만 아니라 글꼴 크기, 자간, 기울임 등 다양한 스타일 속성을 자유롭게 조절할 수 있습니다.
재사용 가능한 클래스로 만들기
위 예제처럼 input 요소를 직접 선택하면 페이지의 모든 입력 필드에 같은 스타일이 일괄 적용됩니다. 특정 입력 필드에만 개별적인 스타일을 주고 싶다면 클래스를 활용하는 것이 좋습니다.
.custom-input-placeholder::placeholder {
color: red;
}그다음 원하는 input 요소에 해당 클래스를 추가하면 됩니다.
<input class="custom-input-placeholder" type="text" placeholder="Hello there!">알아두면 좋은 점: 가상 요소 vs 가상 클래스
가상 요소(pseudo-element)와 가상 클래스(pseudo-class)는 이름이 비슷해 헷갈리기 쉽지만, 역할이 완전히 다릅니다.
- 가상 요소: DOM의 특정 부분을 나타냅니다. 예:
::placeholder,::before,::after - 가상 클래스: 사용자의 상호작용에 따른 요소의 상태(state)를 나타냅니다. 예:
:focus,:active,:hover
문법상 차이도 기억해 두면 유용합니다.
- 가상 요소는 콜론 두 개로 정의합니다 →
:: - 가상 클래스는 콜론 한 개로 정의합니다 →
:
참고로 과거 CSS2 시절에는 가상 요소도 콜론 한 개(:before, :after)로 작성했지만, CSS3부터 두 문법을 명확히 구분하기 위해 콜론 두 개가 표준이 되었습니다. 다만 하위 브라우저 호환성을 위해 단일 콜론 표기도 여전히 동작합니다.