前端学习之鼠标样式轮廓防拖拽文本域（cursor、outline、resize）

最新推荐文章于 2024-11-21 12:04:47 发布
原创 最新推荐文章于 2024-11-21 12:04:47 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html

本文深入探讨了CSS中三个实用技巧：鼠标样式的设置，如何使用outline突出元素，以及如何禁用文本域的随意拖拽。这些技巧对于网页设计者来说至关重要，能够提升用户体验并增强页面的交互性。

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏 ，讲透 AI 如何接管脏活累活

一键订阅

1.鼠标样式cursor

鼠标移上显示的样式。常用的几个如下：

cursor:default 默认白色箭头 丨pointer 小手 丨 move 十字架样子 丨 text 文本

在这里插入图片描述

2.轮廓outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
在这里插入图片描述

outline:outline-color | | outline-style | | outline-width

但是我们都不关心可以设置多少，平时基本是去掉的。
最直接的写法是：outline:0; 或者 outline:none;
在这里插入图片描述

3.防止拖拽文本域resize

在这里插入图片描述
默认的文本域拖拽效果如上图所示。
resize:none; 这个单词可以防止 火狐 谷歌等浏览器随意的拖动文本域

<textarea style="resize: none"></textarea>

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏 ，讲透 AI 如何接管脏活累活

一键订阅
别再死磕公式了！用OpenCV实战EPnP：从2D照片到3D位姿的保姆级推导
weixin_30689307的博客
04-01 578
本文深入解析EPnP算法原理，通过OpenCV实战演示如何将2D照片转换为3D位姿。从控制点选择到坐标变换，详细拆解EPnP在SLAM系统中的高效实现，并提供7个实用避坑指南，帮助开发者快速掌握这一关键计算机视觉技术。
CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结
qq_44156869的博客
02-20 346
文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结 CSS用户界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式。 表单轮廓等。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。 属性值 描述 default 小白 、默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 案例：
cursor（鼠标手型）属性
热门推荐
weixin_45328388的博客
12-06 1万+
㈠简单介绍在浏览网页时，通常看到的鼠标光标形状有箭头、手形、沙漏等，而在 windows 中实际看到的鼠标指针种类比这个还要多。一般情况下，鼠标光标的形状由浏览器负责控制，大多数情况的光标形状为箭头形状，当指向链接时，光标形状会变成手指形状。cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。㈡属性值 ㈢属性简单讲解cursor属性的默认值为 auto， 它表示由浏览器根据当前上下文，自动确定最适合的光标类型。auto 与 default 不同，
css用户界面样式(cursor,outline,resize,垂直对齐,溢出,过渡,变形)
lnh1998的博客
09-20 868
CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文本 ...
原生js实现元素放大缩小
clhdtzhh的博客
07-07 1506
原生js实现元素的放大缩小
cursor 设置光标样式
weixin_40968646的博客
02-07 3501
属性设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。
CSS 其他属性
shenwen5225的博客
12-26 479
文章目录 属性 描述 版本 cursor 规定要显示的光标的类型（形状） CSS2 opacity 设置一个元素的透明度级别 CSS3 content 与 :before 以及 :after 伪元素配合使用，来插入生成内容 CSS2 counter-increment 递增或递减一个或多个计数器 CSS2 counter-reset 创建或重置一个或多个计数器 CS...
CSS 用户界面样式（cursor鼠标样式、outline消除表单轮廓线、resize防止拖拽文本域）
蟹黄堡
05-14 487
用户界面样式简介 定义：用户界面样式就是更改一些用户的操作样式，以便提高用户的体验。 具体措施： 更改用户的鼠标样式 消除表单默认的蓝色轮廓线 防止表单域（文本域）拖拽 cursor鼠标样式 更改鼠标样式的语法格式如下： li{ cursor: pointer; } 注意： 1、cursor属性的具体取值说明见下表： 属性值 说明 default 小白（默认） pointer 小手 move 移动 text 文本 not-allowed 禁止 outline消
鼠标cursor、轮廓outline、防止拖拽文本域resize
qq_44165941的博客
11-14 258
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 鼠标cursor */ /* cursor:d
CSS基础知识：CSS用户界面样式，鼠标样式 cursor，轮廓线 outline，防止拖拽文本域resize
我就知道你会来，我们一起进步吧！
02-14 700
给边框添加outline：0；或者outline:none；样式之后，可以去除默认边框（这个边框指的是你选中时input会出现的颜色描边）cursor的中文意思是光标。实际开发中，文本域不能被拖拽。
CSS样式——cursor
yaningyin的博客
03-22 259
default 箭头形状 auto 浏览器设置的光标 pointer 手型 crosshair 十字交叉 help 帮助 wait 等待 text 文本 move 移动 方向键： e-resize 右，东 w-resize 左，西 n-resize 上，北 s-resize 下...
cursor属性
qq_40650146的博客
06-19 1787
在此记录一下css属性中的一个   cursor属性最常用的就是一个cursor:pointer   一直在使用但是偶然在做别的页面的时候有特殊的样式，于是w3c上查了一下  ，有好多 ，在此记录一下cursor:crosshair   呈现十字线cursor:move  可移动cursor:ne-resize   可向上拖动cursor:wait 正在等待cursor:help 寻求帮助...
（学习笔记）css---用户界面（鼠标样式cursor、表单轮廓、文本域防拖拽）
weixin_57516815的博客
06-18 369
1、鼠标样式cursor
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-26 5956
HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。以下方式的劣势就是在放弃拖拽那一刻会触发click事件，通常如果被拖拽元素还有其他点击事件，会重复触发，往往并非业务需求。貌似这段代码没什么屌优势！.....................
CSS三角、界面样式(cursor、input输入边框不改变颜色、textarea拖拽不改变大小)、vertical-align、溢出文字省略号显示、CSS初始化
Bulut0907
11-08 1988
vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化。当我们选择input输入框，进行文字输入的时候，边框会改变颜色。textarea默认可以在右下角进行拖拽，改变输入框的大小。CSS初始化参考如下。
CSS中cursor属性
weixin_30364325的博客
04-07 237
光标类型 CSS十字准心 cursor: crosshair;手 cursor: pointer;cursor: hand;写两个是为了照顾IE5，它只认hand。等待/沙漏 cursor: wait;帮助 cursor: help;无法释放 cursor: no-drop;文字/编辑 cursor: text;可移动对象 cursor: move;向上改变大小(North) cursor...
【Tailwind CSS】鼠标指针类 `cursor-pointer` 及其相关用法详解
最新发布
lph159的博客
11-21 3045
鼠标指针样式定义了当用户将鼠标悬停在某个元素上时指针的外观。常见的样式包括箭头、手形、十字线等，不同的指针样式能暗示元素的交互行为。< div class = " cursor-custom " > 自定义鼠标指针 < div class = " cursor-custom " > 自定义鼠标指针 < div class = " cursor-custom " > 自定义鼠标指针
案例：模态框拖拽
icemwj的博客
09-23 432
案例：模态框拖拽 业务需求： 弹出框，我们也称为模态框。 点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 鼠标松开，可以停止拖动模态框移动。 案例分析： ① 点击弹出层， 模态框和遮挡层就会显示出来 display:block; ② 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none; ③ 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标。 ④
前端必知：29，改变鼠标手势及鼠标手势的应用
qq_52799985的博客
07-27 3197
在 CSS 中，鼠标手势（Mouse cursor）是指在光标悬停在特定元素上时，鼠标光标的外观样式。它可以通过 CSS 样式属性来定义，使开发者能够控制光标在不同情况下的外观，从而增强用户体验和交互性。
CSS中如何改变鼠标指针样式（cursor）？
官方推荐
08-25 9460
CSS中如何改变鼠标指针样式（cursor）？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值