CSS ::placeholder 선택자로 텍스트 상자의 자리 표시자 색상 변경하기

웹 폼을 디자인할 때 입력 상자(input)에 미리 표시되는 자리 표시자(placeholder) 텍스트는 사용자에게 어떤 값을 입력해야 하는지 안내하는 중요한 역할을 합니다. CSS의 ::placeholder 가상 요소(pseudo-element)를 사용하면 이 자리 표시자 텍스트의 색상을 간단하게 변경할 수 있습니다.

::placeholder 기본 문법

CSS ::placeholder 가상 요소의 기본 문법은 다음과 같습니다.

::placeholder {
   attribute: /*값*/;
}

예제 1: 특정 입력 상자에만 색상 적용하기

다음 예제는 :last-child 선택자와 함께 ::placeholder를 사용하여 페이지의 마지막 input 요소에만 자리 표시자 색상을 cornflowerblue(블루보송)로 지정합니다.

<!DOCTYPE html>
<html>
<head>
<style>
input:last-child::placeholder {
    color: cornflowerblue;
}
</style>
</head>
<body>
<input type="text" placeholder="Default color" />
<input type="text" placeholder="Check my new color :D" />
</body>
</html>

실행 결과

위 코드를 실행하면 첫 번째 입력 상자는 기본 회색을 유지하고, 두 번째 입력 상자의 자리 표시자만 파란색으로 표시됩니다.

CSS ::placeholder 선택자로 텍스트 상자의 자리 표시자 색상 변경하기

예제 2: 모든 입력 상자에 일괄 적용하기

이번 예제에서는 input::placeholder를 사용해 페이지 내 모든 입력 상자의 자리 표시자 색상을 한 번에 fuchsia(푸시아)로 변경합니다. 또한 flex 레이아웃과 box-shadow를 활용해 카드 형태의 디자인을 함께 구성했습니다.

<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
    color: fuchsia;
}
input {
    margin: 2%;
    width: 100%;
}
div {
    display: flex;
    flex-direction: column;
    margin: 3%;
    padding: 3%;
    text-align: center;
    align-items: center;
    box-shadow: inset 0 0 30px brown;
}
button {
    width: 40%;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="Normal placeholder" />
<input type="email" placeholder="somenone@somewhere.com" />
<button>dummy btn</button>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 두 개의 입력 상자 모두 자리 표시자 텍스트가 분홍색 계열의 fuchsia 색상으로 표시되는 것을 확인할 수 있습니다.

CSS ::placeholder 선택자로 텍스트 상자의 자리 표시자 색상 변경하기

마무리

::placeholder 가상 요소를 활용하면 별도의 JavaScript 없이 순수 CSS만으로 자리 표시자의 색상을 자유롭게 커스터마이징할 수 있습니다. 참고로 크로스 브라우저 호환성을 위해 ::-webkit-input-placeholder, :-ms-input-placeholder 등의 벤더 접두사를 함께 작성해 주는 것이 좋습니다.