CSS로 입력 자리 표시자 텍스트의 스타일을 지정하는 방법

CSS로 HTML 입력 요소의 자리 표시자 텍스트 스타일을 지정하려면 의사 요소를 대상으로 지정해야 합니다. 기인하다. CSS 의사 선택기 ::를 사용하면 됩니다. .

자리 표시자 텍스트가 있는 일반 입력 요소

<input type="text" placeholder="Hello there!">

기본 브라우저 스타일로 자리 표시자 텍스트가 어떻게 보이는지:

CSS

이제 CSS ::placeholder를 사용해 보겠습니다. 입력 요소의 자리 표시자 텍스트를 빨간색으로 만드는 선택기:

input::placeholder {
    color: red;
}

결과:

재사용 가능한 자리 표시자 텍스트 클래스

모든 <input>의 스타일을 지정하지 않으려면 요소 자리 표시자 텍스트는 위의 코드와 동일한 방식으로(입력 요소를 직접 대상으로 지정하여) 클래스를 사용할 수 있습니다.

.custom-input-placeholder::placeholder {
    color: red;
}

원하는 입력 요소에 추가:

<input class="custom-input-placeholder" type="text" placeholder="Hello there!">

알아두면 좋은 정보

의사 요소를 혼동하지 마세요. 의사 클래스 사용

• 의사 요소는 DOM의 일부를 나타냅니다.
• 의사 클래스는 상태를 나타냅니다. 요소와 사용자의 상호 작용을 기반으로 합니다. 예::focus 또는 :active .

구문 차이:

• 의사 요소는 이중 콜론으로 정의됩니다. ::
• 의사 클래스는 단일 콜론으로 정의됩니다. :