Home > Article > Web Front-end > How to use css to change the background color after selecting text with the mouse
How to use css to change the background color after selecting text with the mouse
- 青灯夜游Original
- 2021-01-06 15:31:435305browse
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.
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> Rendering:
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!