CSS 鼠标样式及取消表单轮廓和防止拖拽

原创 已于 2023-08-17 10:05:24 修改 · 211 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2023-08-17 09:57:30 首次发布
博客主要介绍了CSS相关知识，包括鼠标样式设置，以及取消表单轮廓和防止拖拽文本域的方法，这些内容属于前端开发中CSS技术的应用。

一、CSS鼠标样式

属性值描述
default默认
pointer小手
move移动
text文本
not-allowed禁止

二、取消表单轮廓和防止拖拽

1、取消表单轮廓

outline: none

 2、防止拖拽文本域

resize: none

使用css代码防止图片被拖拽的教程
欢迎来到瑆箫博客，专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等，助你掌握新技术，优化技能，激发编程热情。
11-23 3071
在网页中，我们经常使用图片来美化页面或辅助内容呈现，但有时用户会无意中拖拽图片，这会对页面布局或其他元素产生意想不到的影响。为了防止这种情况，我们可以使用CSS来禁止。总体来说，禁止图片被拖拽或复制可以让我们更好地控制网页的布局和展示效果，提高用户体验和页面质量。如上面的代码所示，我们可以使用用户拖拽相关的CSS属性来实现禁止图片拖拽的效果。属性也分别对应不同的浏览器厂商，用于防止图片被选中并复制。如果希望同时禁止图片被复制，我们可以使用。属性分别对应不同的浏览器厂商。
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 5043
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
css用户界面-取消表单轮廓防止拖拽文本域
lxllxl211的博客
10-07 206
【代码】css用户界面-取消表单轮廓防止拖拽文本域。
网页中 任意控件，模块，禁止拖拽效果
09-23
本方法简单实用 只用在web标签里面设置一个属性即可
css 手机禁止页面拖动
as515515的博客
11-15 854
touch-action:none; pointer-events:auto; 转载于:https://www.cnblogs.com/amazingDuck/p/6064926.html
CSS禁止元素拖拽
hao_fly的博客
12-04 2746
HTML draggable属性的兼容性是相当的好，移动端全部支持，以及IE10+浏览器也都支持，基本上在如今这个年代是可以放心使用的HTML属性。使用CSS设置元素能够拖拽的优点在于控制方便，适合用在只需要兼容Chrome、Safari浏览器的桌面端PC网页产品中。以前专门贡献过包含拖动、插入、排序、删除等完整交互的demo，有些人应该还不知道，可以访问这里了解下其中的实现细节。draggable属性常常和原生的drag & drop事件配合使用，可以实现任意元素的拖拽效果。页面中的图文元素设置。
Css基础——绘制三角形、鼠标样式、轮廓线、放拖拽文本域、vertical-align属性
迪幻的博客
03-13 668
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。这样是不利于我们的界面的美观的，所以我们可以通过设置outline: none来取消这个特效。当其中的三边都是透明（transparent）的时候，就可以看到一个小三角形。一般情况下，我们选中文本框时，文本框外面的边框会变粗或者有着蓝色的描边。在页面默认的情况下，我们的textarea是可以进行拖拽的。这不利于我们页面的排版，因此，我们可以取消这个拖动的功能。这样，我们的边框特效就取消了。
CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结
qq_44156869的博客
02-20 320
文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结 CSS用户界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式。 表单轮廓等。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。 属性值 描述 default 小白 、默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 案例：
CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标
2302_77099705的博客
04-30 1370
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
HTML CSS高级技巧 -元素的显示与隐藏-用户界面样式-溢出文字隐藏-css精灵图-字体图标
m0_72498273的博客
07-19 1623
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display、visibility和overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display设置对象是否显示、如何显示。display : none隐藏对象。与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。设置或检索是否显示对象。
div层可以随意拖拽
07-23
弹出的div层可以随意拖拽 不错js
css实现元素禁止拖拽
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
12-15 623
【代码】css实现元素禁止拖拽。
使用css如何防止拖拽文本域？
最新发布
王铁柱666的博客
12-29 482
如果你想要更精细地控制拖拽行为，可能需要使用 JavaScript 来监听和处理拖拽事件。但是，对于大多数情况，上述 CSS 方法应该足够用来阻止用户拖拽文本域中的文本。然而，这个属性实际上是控制用户是否可以选择文本，而不是直接控制拖拽行为。在大多数情况下，禁止选择文本也会间接地阻止拖拽文本，因为用户通常需要先选择文本才能拖拽。例如，用户可能仍然能够拖拽文本域本身（而不是其中的文本），特别是如果文本域具有可拖拽的 CSS 属性（如。元素，使得用户无法选择或拖拽其中的文本。），你可以使用 CSS 的。
CSS 禁止拖动 选中
jinwenshuo2007的博客
01-28 800
# 禁止拖拽 -webkit-user-drag: none; # 禁止选中 -webkit-user-select: none;
css禁止文字选中与图片拖拽
weixin_44328764的博客
09-26 760
禁止文字选中 .select-none { -webkit-user-select: none; -ms-user-select: none; user-select: none; } user-select目前的兼容性 禁止图片拖拽 .drag-none { -webkit-user-drag: none; } user-drag目前的兼容性
(css必看)禁止用户拖动，禁止选中复制，禁止输入框输入
大雾起了清晨
05-12 1644
​ 目录 特殊的css，下面每一个都必须了解 1.user-select属性可以设置是否允许用户选择页面中的图文内容； 2.user-drag属性可以设置是否允许页面元素拖拽。 3.user-modify属性可以设置是否允许输入框输入内容 特殊的css，下面每一个都必须了解 1.user-select属性可以设置是否允许用户选择页面中的图文内容； user-select不可被用户选中__揽的博客-优快云博客 user-select: none; 2.user-drag属性可以设置是否允
前端页面禁止鼠标拖拽事件
qq_37647812的博客
08-13 760
页面禁止鼠标拖拽、选取、复制文字等功能，主要设计如下4项参数：//禁止鼠标右键//禁止鼠标拖动//文字禁止鼠标选中4、onselect//禁止复制文本页面中使用如下：">
禁止div被拖动 css,【Web前端问题】div在拖动时出现禁止图标
weixin_32304839的博客
08-03 2513
代码结构：js代码：drag_append:function(){var self = this;var appender = null;$('.ullis').find('.lis').on('mousedown',function(event){var e = window.event||arguments[0];var niu = $(this).clone();var a = self....
CSS高级技巧与用户界面样式
为了提升用户体验，可以修改一些用户交互的视觉反馈，如鼠标样式和表单元素的外观。 2.1 鼠标样式 `cursor` - `cursor:default;` 设置为默认的鼠标指针。 - `cursor:pointer;` 使元素显示为手形指针，通常用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值