How to modify cursor color in css-CSS Tutorial-php.cn

How to modify cursor color in css

青灯夜游

Release： 2023-01-07 11:45:08

Original

5940 people have browsed it

Method: 1. Use the caret-color attribute, the syntax "caret-color: color value;"; 2. Use the "::first-line" selector, the syntax "input{color: cursor color value;" }input::first-line{color: text color value;}".

How to modify cursor color in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are two commonly used methods to change the color of the insertion cursor in CSS:

Method 1: Use the caret-color attribute

The caret-color attribute specifies the color of the cursor (caret) in input, textareas, or any editable element.

Example:

<!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>

Copy after login

Rendering:

How to modify cursor color in css

##caret-color attribute Currently, Chrome and Firefox can basically use it with confidence. But Safari and IE browsers still need to wait for some time.

Method 2: Use the ::first-line selector

Yes

<!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>

Copy after login

Rendering:

How to modify cursor color in css

The method of using ::first-line pseudo-element performs well under Chrome and Safari browsers, but Firefox browser does not support it

Compatibility method:

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

Copy after login

（Learning video sharing:

css video tutorial）

The above is the detailed content of How to modify cursor color in css. For more information, please follow other related articles on the PHP Chinese website!