css3之user-select
------------- 控制内容的可选择性。
前面写给两篇相关的可以查看:
http://zhangyaochun.iteye.com/blog/1535252 (-moz-user-select属性)
http://zhangyaochun.iteye.com/blog/1461522 (屏蔽右键与页面内容选中的脚本)
可选的值:
- auto ---- 默认值,可以选中元素中的内容
- none --- 不能选择元素中的任何内容
- text ---- 可以选择元素中的文本
- element ---- 文本可选,但仅限元素的边界内(IE和FF支持)
- all ----在编辑器内,如果双击或者上下文点击发生在子元素上,它的最高级祖先元素将被选中。
- -moz-none ----FF私有,元素和子元素的文本将不可选。
.noSelect{ -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
浏览器支持:
目前只有Gecko与webkit内核的支持该属性。IE10也开始支持,Opera目前不支持。
相关推荐
而在firefox下,文字不会被选中,查看google calender的css,原来还有-moz-user-select这个属性,很好玩! 最后采用一个了js方法,即onselectstart=function{return false;},不让页面进行选择,呵呵,这是很多网站...
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 复制代码代码如下: body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ ...
`-moz-user-select`是Mozilla Firefox浏览器特有的CSS属性,用于控制元素是否允许用户选择其内容。当`-moz-user-select`设置为`none`时,用户无法通过鼠标选择该元素内的文本。例如: ```css element { -moz-user-...
复制代码代码如下:(-prefix-)user-select: none;(-prefix-)user-select: text;(-prefix-)user-select: all;(-prefix-)user-select: element; 示例 复制代码代码如下:.row-of-icons { -webkit-user-select: none; /*...
当你在 .css() 和 .animate() 中使用 CSS 属性时,jQuery 会自动根据浏览器类型来设置一些前缀,例如 .css("user-select", "none") 在 Chrome/Safari 会变成 "-webkit-user-select", 在 Firefox 变成 "-moz-user-...
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn:before, .btn:after { content: ''; position: absolute; -webkit-transition: inherit;...
综上所述,通过结合使用CSS3的`user-select`属性、JavaScript的键盘事件监听和右键点击事件监听,我们可以有效地在HTML页面中禁止用户选择、复制和右键操作。不过需要注意的是,这样的限制可能会影响到部分有特殊...
以下CSS样式实现了各浏览器的标签禁止选中功能。 复制代码代码如下:moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:...
-webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au
2. **CSS禁用选择**:通过设置CSS属性`user-select`为`none`,可以阻止用户选中文本。例如:`* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }` 3. **框架和...
CSS中的`user-select`属性可以用于禁止用户选中文本。以下是一个示例: ```css body { -webkit-user-select: none; /* 针对Chrome和Safari */ -moz-user-select: none; /* 针对Firefox */ -ms-user-select: none...
移动选择日期 手机联动选择日期效果图如下: 例子见 用法 <!DOCTYPE> ...link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css"> <script type="text/javascript
当你在 .css() 和 .animate() 中使用 CSS 属性时,jQuery 会自动根据浏览器类型来设置一些前缀,例如 .css("user-select", "none") 在 Chrome/Safari 会变成 "-webkit-user-select", 在 Firefox 变成 "-moz-user-...
代码如下: $(el).attr(‘unselectable’,’on’) .css({‘-moz-user-select’:’-moz-none’, ‘-moz-user-select’:’none’, ‘-o-user-select’:’none’, ‘-khtml-user-select’:’none’, /* you could also ...
SELECT2_CSS = 'path/to/select2.css' SELECT2_JS = 'path/to/select2.js' SELECT2_LOCALE = 'zh-CN' # 如果需要中文支持 ``` 此外,你需要在模板中引入`django-easy-select2`的JS和CSS,通常在`base.html`或全局...
3. **自定义样式searchClass**:描述中提到了“searchClass”,这可能是指自定义`Chosen`搜索框的样式。`Chosen`会自动为搜索框添加一个特殊的类名,如`.chosen-search-input`,你可以根据自己的需求通过CSS来定制它...