CSS에서 커서 색상을 수정하는 방법-CSS 튜토리얼-php.cn

CSS에서 커서 색상을 수정하는 방법

青灯夜游

풀어 주다： 2023-01-07 11:45:08

원래의

5942명이 탐색했습니다.

방법: 1. "caret-color: color value;" 구문인 캐럿 색상 속성을 사용합니다. 2. "::first-line" 선택기인 "input{color:cursor color value;} 구문을 사용합니다. 입력:: 첫 번째 줄{색상:텍스트 색상 값;}".

CSS에서 커서 색상을 수정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 삽입 커서 색상을 변경하는 두 가지 일반적인 방법이 있습니다.

방법 1: 캐럿 색상 속성 사용

캐럿 색상 속성은 입력, 텍스트 영역에서 커서(캐럿)를 지정합니다. 또는 편집 가능한 요소 색상.

예:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.example {
			  caret-color: red;
			}
		</style>
	</head>

	<body>
		<input value="默认的光标颜色"><br><br>
		<input class="example" value="自定义光标颜色"><br><br>

	</body>

</html>

로그인 후 복사

Rendering:

CSS에서 커서 색상을 수정하는 방법

caret-color 속성 현재 Chrome과 Firefox는 기본적으로 안심하고 사용할 수 있지만 Safari와 IE 브라우저는 아직 좀 기다려야 합니다.

방법 2: ::첫 번째 줄 선택기 사용

예

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			input {
					color: red;/* 文本颜色和光标颜色设置为 red */
				}
			input::first-line {
					color: #333;/* 设置文本颜色，将文本颜色和光标颜色区分开来 */
			}
		</style>
	</head>

	<body>
		<input class="example" value="自定义光标颜色"><br><br>

	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 커서 색상을 수정하는 방법

Chrome 및 Safari 브라우저에서 제대로 작동하려면 ::첫 번째 줄 의사 요소 방법을 사용하세요. 하지만 Firefox 브라우저는

호환 방법:

input {
    color: #333;
    caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
    input { color: red; }
    input::first-line { color: #333; }
}

로그인 후 복사

(동영상 공유 학습: css 동영상 튜토리얼)

을 지원하지 않습니다.

위 내용은 CSS에서 커서 색상을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!