zoukankan      html  css  js  c++  java
  • css3中user-select的用法详解

    css3中user-select的用法详解

    user-select属性是css3新增的属性,用于设置用户是否能够选中文本。可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项的说明,更多信息可参考如下css3文档说明。

    参考链接:http://www.css88.com/book/css/properties/user-interface/user-select.htm

    (1) 语法

    user-select:none | text | all | element

    默认值:text

    适用范围:除替换元素外的所有元素

    (2) 取值说明

    none:文本不能被选择

    text:可以选择文本

    all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。

    Element:可以选择文本,但选择范围受元素边界的约束

    (3) 浏览器支持情况

    以下图列出的是值为none|text|all的情况下各个浏览器的支持程度;值为element时,大部分浏览器不支持,故不列出。

    浏览器兼容图

    (4) 说明

    1.IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;"来达到 user-select:none 的效果;SafariChrome也支持该标签属性;

    2.直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none的效果;unselectable 的另一个值是off;

    3.除Chrome</font>和Safari</font>外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本;

    4.对应的脚本特性为userSelect

    (5) 示例

    css代码:

    .box{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    html代码:

    <div class="box" onselectstart="return false;" unselectable="on">
        这是测试数据
    </div>

    本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hj2aj1kj1hj

  • 相关阅读:
    Shiro结合配置文件实战实现权限验证
    Shiro的一些概念解释以及配置了解
    jedis工具类
    【转载】redis的主从复制
    Redis的事务
    redis的持久化
    SSM框架-SpringMVC 实例文件上传下载
    如何设置CentOS 7获取动态及静态IP地址
    阿里云linux centos 一键部署web环境--图文详解
    SVN使用教程总结
  • 原文地址:https://www.cnblogs.com/10manongit/p/12913477.html
Copyright © 2011-2022 走看看