css怎么实现内容不可选


本文摘自PHP中文网,作者藏色散人,侵删。

css实现内容不可选的方法:首先新建一个html文件;然后使用p标签创建多行文字,并给p标签添加一个class属性;最后通过“class(testpp)”设置页面文字的css样式,并将“user-select”属性设置为none即可。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

新建一个html文件,命名为test.html,用于讲解css怎么让页面上的内容不能被选中。

058687872f077be80b2f9c979f7b602.png

在test.html文件内,使用p标签创建多行文字,用于下面进行测试。

475f676ce15e6a94150bfdfad09adf4.png

在test.html文件内,给p标签添加一个class属性,用于通过该class设置p标签的css样式 。

2c90cfeef473f630d5547ce1cdcd8fd.png

在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

8cecb24012066e340a66a03cced0a99.png

在css标签内,通过class(testpp)设置页面文字的css样式,将user-select属性设置为none,实现页面内容不被选中效果。

1518bd588053f65e6064b68cfea10ed.png

user-select属性对部分低版本浏览器可能存在不兼容问题,因此,可以添加兼容的样式提高代码的兼容性。代码如下:

01d664282b38d4ed732000a93ea4549.png

在浏览器打开test.html文件,查看实现的效果。

0e3eb7a8217f6d98e80c41ea4cfabd0.png

总结:

1、在css样式中,将user-select属性设置为none,实现内容不可被选中。

2、为了提高样式的兼容性,可以同时使用“-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;”来设置页面内容的样式。

推荐学习:《css视频教程》

以上就是css怎么实现内容不可选的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

a标签怎么去掉下划线

css伪类分为哪几种

css输入框怎么设置不可编辑

css中什么是内联元素

css中7个你必须知道属性

css right属性怎么用

css unicode-bidi属性怎么用

css怎样将li的序号取消

css里面的rgba有几个值

css中如何给整个页面添加背景颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...