Home  >  Article  >  Web Front-end  >  How to modify cursor color in css

How to modify cursor color in css

青灯夜游
青灯夜游Original
2021-07-22 17:14:495912browse

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>

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>

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; }
}

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn