美文网首页CSS
CSS:禁止选中文本

CSS:禁止选中文本

作者: 王策北 | 来源:发表于2018-09-12 13:14 被阅读0次

    CSS特性:user-select: none;

    实现效果:禁止选中指定的文本

    Sample code:

    <!-- HTML部分 -->
    <p class="no-selected">this is a pargraph/p> 
    
    //CSS部分
    .no-selected {
    -webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
    -moz-user-select: none; /*Foxfire */
    -ms-user-select: none; /*Internet Explorer/ Edge*/
    -o-user-select: none; /*Opear老版本*/
    -khtml-user-select: none; /* Konqueror */
    -webkit-touch-callout: none; /* iOS Safari */
    user-select: none;  
    /* Nonprefixed version, currently not supported by any browser */
    }
    

    note: 在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on",否则可能不会生效.

    MDN:user-select特性是非标准的。请谨慎使用

    //Formal syntax: none | text | all | element
    (-prefix-)user-select: none;
    (-prefix-)user-select: text;
    (-prefix-)user-select: all;
    (-prefix-)user-select: element;
    

    none:元素内的文字及其子元素将不会被选中. Selection can contain these elements. Starting with Firefox 21 none behaves like -moz-none, so selection can be re-enabled on sub-elements using -moz-user-select:text.

    text:用户可以选中文字.-moz-noneThe text of the element and sub-elements will appear as if they cannot be selected. Selection can contain these elements. Selection can be re-enabled on sub-elements using -moz-user-select: text. Starting with Firefox 21 none behaves like -moz-none.

    all:在一个HTML编辑器中,当双击子元素或者上下文时,那么包含该子元素的最顶层元素也会被选中。

    element:火狐和IE中有效. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

    Note:user-select is not currently part of any W3C CSS specification(user-select不是现行W3C CSS规范的一部分). As such, there are minor differences between the browser implementations. Be sure to test your application across browsers.

    相关文章

      网友评论

        本文标题:CSS:禁止选中文本

        本文链接:https://www.haomeiwen.com/subject/rgcvgftx.html