How to use css to change the background color after selecting text with the mouse-CSS Tutorial-php.cn

How to use css to change the background color after selecting text with the mouse

青灯夜游

Release： 2023-01-04 09:38:55

Original

5425 people have browsed it

You can use the "::selection" selector in css to achieve the effect of changing the background color after the mouse selects text. Just add the "E::selection{background: background color value;}" style to the text element E. That’s it.

How to use css to change the background color after selecting text with the mouse

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

Tutorial recommendation: css video tutorial

css to change the background color after the mouse selects the text

css after the mouse selects the text You can change the background color using the ::selection selector.

::selection selector matches the part of the element that is selected or highlighted by the user. ::selection can only be applied to a few CSS properties: color, background, cursor and outline.

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p {
				border: 1px solid red;
			}
			
			.color::-moz-selection {
				background: #93c;
				color: #fcf;
			}
			
			.color::selection {
				background: #93c;
				color: #fcf;
			}
		</style>
	</head>

	<body>
		<p>默认文本。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
		<p class="color">鼠标选中文字后改变背景色。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
	</body>

</html>

Copy after login

Rendering:

How to use css to change the background color after selecting text with the mouse

##For more programming-related knowledge, please visit:

Programming teaching! !

The above is the detailed content of How to use css to change the background color after selecting text with the mouse. For more information, please follow other related articles on the PHP Chinese website!