CSS 不可被选中|极客教程

CSS 不可被选中

在网页开发中，有时候我们希望某些元素的内容不被用户选中，这样可以避免用户复制或者选中页面上的特定内容。在CSS中，我们可以通过一些属性和伪类来实现这个效果。本文将详细介绍如何使用CSS来实现内容不可被选中的效果。

user-select属性

user-select属性用于控制用户是否可以选择元素的内容。该属性有以下几个取值：

auto：默认值，用户可以选择元素的内容。
none：用户无法选择元素的内容。
text：用户只能选择文本内容，不能选择非文本内容。

示例代码1：禁止选中元素内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Selection</title>
<style>
.disable-select {
    user-select: none;
}
</style>
</head>
<body>
<div class="disable-select">This content cannot be selected.</div>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给div元素添加了一个类名.disable-select，并设置了user-select: none;，这样用户就无法选中div元素中的内容。

阻止文本选择

除了使用user-select属性外，我们还可以使用-webkit-user-select和-moz-user-select属性来阻止文本选择。

示例代码2：阻止文本选择

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Text Selection</title>
<style>
.prevent-select {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    user-select: none;
}
</style>
</head>
<body>
<div class="prevent-select">This text cannot be selected.</div>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们使用了-webkit-user-select: none;和-moz-user-select: none;来阻止文本选择，这样用户无法选中div元素中的文本内容。

阻止鼠标拖动

有时候我们希望某些元素不被用户拖动，可以使用-webkit-user-drag和user-drag属性来实现。

示例代码3：阻止鼠标拖动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Dragging</title>
<style>
.prevent-drag {
    -webkit-user-drag: none; /* Safari/Chrome */
    user-drag: none;
}
</style>
</head>
<body>
<img src="https://www.geek-docs.com/image.jpg" class="prevent-drag" alt="Geek Docs">
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给img元素添加了一个类名.prevent-drag，并设置了-webkit-user-drag: none;和user-drag: none;，这样用户无法拖动img元素。

阻止链接被选中

有时候我们希望链接不被用户选中，可以使用pointer-events属性来实现。

示例代码4：阻止链接被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Link Selection</title>
<style>
.prevent-link {
    pointer-events: none;
}
</style>
</head>
<body>
<a href="https://www.geek-docs.com" class="prevent-link">Geek Docs</a>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给a元素添加了一个类名.prevent-link，并设置了pointer-events: none;，这样用户无法选中链接。

阻止输入框内容被选中

有时候我们希望输入框中的内容不被用户选中，可以使用-webkit-user-modify属性来实现。

示例代码5：阻止输入框内容被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Input Selection</title>
<style>
.prevent-input {
    -webkit-user-modify: read-only;
}
</style>
</head>
<body>
<input type="text" value="geek-docs.com" class="prevent-input">
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给input元素添加了一个类名.prevent-input，并设置了-webkit-user-modify: read-only;，这样用户无法选中输入框中的内容。

阻止文本框内容被选中

有时候我们希望文本框中的内容不被用户选中，可以使用-moz-user-select属性来实现。

示例代码6：阻止文本框内容被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Textarea Selection</title>
<style>
.prevent-textarea {
    -moz-user-select: none; /* Firefox */
}
</style>
</head>
<body>
<textarea class="prevent-textarea">geek-docs.com</textarea>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给textarea元素添加了一个类名.prevent-textarea，并设置了-moz-user-select: none;，这样用户无法选中文本框中的内容。

阻止表单元素内容被选中

有时候我们希望表单元素中的内容不被用户选中，可以使用-webkit-touch-callout属性来实现。

示例代码7：阻止表单元素内容被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Form Element Selection</title>
<style>
.prevent-form {
    -webkit-touch-callout: none;
}
</style>
</head>
<body>
<form class="prevent-form">
    <input type="text" value="geek-docs.com">
    <button type="submit">Submit</button>
</form>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给form元素添加了一个类名.prevent-form，并设置了-webkit-touch-callout: none;，这样用户无法选中表单元素中的内容。

阻止图片被选中

有时候我们希望图片不被用户选中，可以使用-webkit-user-select属性来实现。

示例代码8：阻止图片被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Image Selection</title>
<style>
.prevent-image {
    -webkit-user-select: none; /* Safari/Chrome */
}
</style>
</head>
<body>
<img src="https://www.geek-docs.com/image.jpg" class="prevent-image" alt="Geek Docs">
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给img元素添加了一个类名.prevent-image，并设置了-webkit-user-select: none;，这样用户无法选中图片。

阻止背景图片被选中

有时候我们希望背景图片不被用户选中，可以使用-webkit-background-clip属性来实现。

示例代码9：阻止背景图片被选中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Background Image Selection</title>
<style>
.prevent-background {
    -webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="prevent-background" style="background-image: url('https://www.geek-docs.com/background.jpg');">Geek Docs</div>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给div元素添加了一个类名.prevent-background，并设置了-webkit-background-clip: text;，这样用户无法选中背景图片。

阻止元素被拖动

有时候我们希望某些元素不被用户拖动，可以使用draggable属性来实现。

示例代码10：阻止元素被拖动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Element Dragging</title>
<style>
.prevent-draggable {
    pointer-events: none;
}
</style>
</head>
<body>
<div class="prevent-draggable" draggable="true">Drag me</div>
</body>
</html>

代码运行结果:

CSS 不可被选中

在上面的示例中，我们给div元素添加了一个类名.prevent-draggable，并设置了pointer-events: none;，这样用户无法拖动div元素。

总结

通过本文的介绍，我们学习了如何使用CSS来实现内容不可被选中的效果。我们可以通过user-select、-webkit-user-select、-moz-user-select、-webkit-user-drag、user-drag、pointer-events、-webkit-user-modify、-moz-user-select、-webkit-touch-callout等属性来控制元素的选中和拖动行为，从而提升用户体验和页面设计的完整性。