이 매뉴얼에서는 CSS를 사용하여 입력 자리 표시자의 색상을 변경하는 다양한 방법을 설명합니다.
방법 1: '::placeholder' 선택기를 사용하여 입력 자리 표시자 색상 변경
CSS ' ::자리 표시자 ' 선택자는 자리 표시자 텍스트가 있는 양식 요소를 선택하는 데 사용됩니다. 자리 표시자 텍스트를 변경하는 데 사용할 수 있습니다. 또한 이 선택기를 사용하여 입력 자리 표시자의 색상을 수정할 수 있습니다.
통사론
::placeholder의 구문은 다음과 같습니다.
:: 자리 표시자 {
색깔 : 값
}
'대신에 값 ', 입력 자리 표시자의 색상을 우리의 선택에 따라 설정할 수 있습니다.
실제 예제로 이동하여 입력 자리 표시자의 색상을 변경하겠습니다.
예시
입력 자리 표시자 색상을 변경하려면 먼저 태그를 사용하여 입력 요소를 만들고 입력 유형을 ' 텍스트 '. 다음으로 입력 자리 표시자의 텍스트를 ' 입력하다 당신의 이름 '.
HTML
< 신체 >< 입력 유형 = '텍스트' 자리 표시자 = '당신의 이름을 입력' >
< / 신체 >
주어진 코드의 출력은 다음과 같습니다.
입력 자리 표시자의 기본 색상은 위에 제공된 이미지에 표시됩니다.
이제 CSS로 이동하여 ' ::자리 표시자 ' 입력 자리 표시자의 텍스트에 액세스하고 해당 색상을 ' RGB(17, 0, 255) '.
CSS
:: 자리 표시자 {색깔 : RGB ( 17 , 0 , 255 ) ;
}
보시다시피 추가된 입력 자리 표시자의 색상이 파란색으로 변경됩니다.
입력 자리 표시자의 색상을 변경하는 또 다른 방법이 있습니다. 확인 해보자.
방법 2: '::-webkit-input-placeholder' 의사 클래스 요소를 사용하여 입력 자리 표시자 색상 변경
' :: – 웹킷 입력 자리 표시자 ' 의사 클래스 요소는 주로 양식 요소의 자리 표시자 텍스트를 나타냅니다. 테마 디자이너와 개발자는 이를 활용하여 자리 표시자 텍스트의 모양을 사용자 지정할 수 있습니다. 또한 사용자는 지정된 요소를 사용하여 입력 자리 표시자의 색상을 수정할 수 있습니다.
통사론
::-webkit-input-placeholder의 구문은 다음과 같습니다.
:: -webkit-input-placeholder {색깔 : 값
}
'대신에 값 ', 입력 자리 표시자의 색상을 설정할 수 있습니다.
위에서 논의한 의사 클래스 요소를 이해하기 위해 예제로 이동하겠습니다.
예시
CSS 파일에서 ' ::-webkit-input-placeholder ' 유사 클래스 요소를 만들고 색상 값을 ' RGB(255, 13, 13) ':
:::: -webkit-input-placeholder {색깔 : RGB ( 255 , 13 , 13 ) ;
}
산출
여기에서 입력 자리 표시자의 기본 색상이 변경된 것을 볼 수 있습니다.
결론
'를 사용하여 입력 자리 표시자의 색상이 변경됩니다. ::자리 표시자 ' 선택기 및 ' :: – 웹킷 입력 자리 표시자 ' 유사 클래스 요소. 이를 사용하여 입력 자리 표시자의 기본 색상을 변경할 수 있습니다. 이 기사에서는 CSS 속성을 사용하여 입력 자리 표시자의 색상을 변경하는 절차에 대해 설명했습니다.