텍스트 입력 캐럿 스타일이란 무엇입니까?

HTML의 텍스트 입력에서는 텍스트 입력 캐럿이라는 표시가 텍스트에 표시되는 것을 볼 수 있습니다. 텍스트 입력 커서라고도 합니다.

이 튜토리얼에서는 텍스트 입력 캐럿의 스타일을 지정하는 방법을 배웁니다. 그러나 최신 브라우저는 모양 변경을 지원하지 않기 때문에 텍스트 입력 캐럿의 색상만 변경할 수 있습니다.

문법

사용자는 아래 구문에 따라 'caret-color' CSS 속성을 사용하여 텍스트 입력 캐럿의 색상을 변경할 수 있습니다.

위 입력에서 'color'는 문자열 형식의 색상 이름, 16진수 값, rgb 값 또는 HSL 값일 수 있습니다.

예제 1

예제 1

아래 예에서는 두 개의 텍스트 입력을 정의하고 "inp" 및 "inp1" 클래스 이름을 지정했습니다. "caret-color" CSS 속성을 사용하여 첫 번째 입력 요소에 "빨간색" 색상을 설정했습니다.

또한 두 번째 입력 요소에는 'auto' 값을 사용합니다. 출력에서 사용자는 첫 번째 입력 상자에 빨간색 커서가 있고 두 번째 입력 상자에 검은색 커서가 있는 것을 볼 수 있습니다. 이는 자동 값이 브라우저의 기본 색상(대부분의 경우 검은색)을 사용하기 때문입니다.

예 2

아래 예에서는 “color-caret” CSS 속성 값으로 “transparent”를 사용하여 커서의 투명 색상을 설정했습니다. 기본적으로 텍스트 입력 커서를 숨겨야 할 때 사용할 수 있습니다.

출력에서 사용자는 입력 상자에 텍스트를 입력할 수 있지만 커서가 보이지 않는 것을 볼 수 있습니다.

예 3

아래 예에서는 div 요소 내에 텍스트를 추가했습니다. 그런 다음 div 요소에 참값을 갖는 'contenteditable' 속성을 사용하여 div 요소의 콘텐츠를 편집 가능하게 만들었습니다.

여기서 편집 가능한 div 요소의 텍스트 입력 커서 스타일을 지정하고 사용자가 출력에서 ​​볼 수 있는 분홍색 색상을 지정합니다.

사용자는 "캐럿 색상" CSS 속성을 사용하여 텍스트 입력 캐럿 스타일을 지정하는 방법을 배웠습니다. 그러나 일부 오래된 브라우저는 커서 모양을 변경할 수 있는 '캐럿 모양' 속성도 지원하지만 최신 브라우저는 이를 지원하지 않습니다.

위 내용은 텍스트 입력 캐럿 스타일이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!