CSS设置元素不可选中|极客教程

CSS设置元素不可选中

在网页开发中，有时候我们希望某些元素不被用户选中，这样可以提升用户体验或者保护网站内容的安全性。在CSS中，我们可以通过一些简单的属性和技巧来实现这个效果。本文将详细介绍如何使用CSS来设置元素不可选中。

1. 使用user-select属性

user-select属性可以控制用户是否可以选择元素的内容。通过设置user-select: none;可以禁止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        user-select: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，.disable-select类的元素中的文本将无法被选中。

2. 使用CSS伪类

除了使用user-select属性外，我们还可以使用CSS伪类来实现元素不可选中的效果。例如，可以使用::selection伪类来禁止选中文本。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    ::selection {
        background-color: transparent;
        color: inherit;
    }
</style>
</head>
<body>
    <div>This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，当用户尝试选择文本时，文本的背景颜色将变为透明，从而看起来无法被选中。

3. 使用JavaScript

除了纯CSS方法外，我们还可以使用JavaScript来实现元素不可选中的效果。通过监听mousedown、selectstart和contextmenu事件，我们可以阻止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        user-select: none;
    }
</style>
<script>
    document.addEventListener('mousedown', function(e) {
        e.preventDefault();
    });

    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
    });

    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
</script>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过JavaScript监听事件并调用preventDefault()方法，可以阻止用户选择元素的内容。

4. 使用CSS属性-webkit-user-select

在一些浏览器中，可以使用-webkit-user-select属性来控制用户是否可以选择元素的内容。通过设置-webkit-user-select: none;可以禁止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -webkit-user-select: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-webkit-user-select: none;可以禁止用户选择元素的内容。

5. 使用CSS属性-moz-user-select

类似于-webkit-user-select属性，-moz-user-select属性可以在一些浏览器中控制用户是否可以选择元素的内容。通过设置-moz-user-select: none;可以禁止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -moz-user-select: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-moz-user-select: none;可以禁止用户选择元素的内容。

6. 使用CSS属性-ms-user-select

在IE浏览器中，可以使用-ms-user-select属性来控制用户是否可以选择元素的内容。通过设置-ms-user-select: none;可以禁止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -ms-user-select: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-ms-user-select: none;可以禁止用户选择元素的内容。

7. 使用CSS属性-khtml-user-select

在一些KHTML浏览器中，可以使用-khtml-user-select属性来控制用户是否可以选择元素的内容。通过设置-khtml-user-select: none;可以禁止用户选择元素的内容。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -khtml-user-select: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-khtml-user-select: none;可以禁止用户选择元素的内容。

8. 使用CSS属性-webkit-touch-callout

在一些移动设备浏览器中，可以使用-webkit-touch-callout属性来控制用户长按元素时是否显示系统默认菜单。通过设置-webkit-touch-callout: none;可以禁止长按元素时显示系统默认菜单。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -webkit-touch-callout: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-webkit-touch-callout: none;可以禁止长按元素时显示系统默认菜单。

9. 使用CSS属性-webkit-tap-highlight-color

在一些移动设备浏览器中，可以使用-webkit-tap-highlight-color属性来控制用户点击元素时的高亮颜色。通过设置-webkit-tap-highlight-color: transparent;可以禁止点击元素时的高亮效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -webkit-tap-highlight-color: transparent;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中

在上面的示例中，通过设置-webkit-tap-highlight-color: transparent;可以禁止点击元素时的高亮效果。

10. 使用CSS属性-webkit-user-drag

在一些浏览器中，可以使用-webkit-user-drag属性来控制用户是否可以拖动元素。通过设置-webkit-user-drag: none;可以禁止用户拖动元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Text Selection</title>
<style>
    .disable-select {
        -webkit-user-drag: none;
    }
</style>
</head>
<body>
    <div class="disable-select">This text cannot be selected.</div>
</body>
</html>

Output:

CSS设置元素不可选中