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

最新推荐文章于 2023-07-27 19:42:54 发布
最新推荐文章于 2023-07-27 19:42:54 发布
阅读量856 收藏
点赞数
分类专栏： 前端学习基础记录 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/106459352
版权

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>
Endless Daydream233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可拖拽的窗体（让窗体随着鼠标移动）
weixin_46483221的博客
03-12 613
html代码： 这个时基本的代码框架，可以根据你的需求进行添加内容 <div class="nav"> <a href="javascript:;" id="register">注册信息</a> </div> <div class="d-box" id="d_box"> <div class="hd" id="dro...
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 4739
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
鼠标cursor、轮廓outline、防止拖拽文本域resize
qq_44165941的博客
11-14 151
<!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用户界面样式(cursor,outline,resize,垂直对齐,溢出,过渡,变形)
lnh1998的博客
09-20 550
CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文本 ...
CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结
qq_44156869的博客
02-20 219
文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结 CSS用户界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式。 表单轮廓等。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。 属性值 描述 default 小白 、默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 案例：
CSS轮廓outline的具体使用
09-24
1. `outline-style`：定义了轮廓的样式。可用的值有： - `none`：没有轮廓。 - `dotted`：点线轮廓。 - `dashed`：虚线轮廓。 - `solid`：实线轮廓。 - `double`：双线轮廓。 - `groove`：模拟凹槽效果的轮廓...
表单美化之textarea文本域背景的美化.rar
07-05
本文档“表单美化之textarea文本域背景的美化.rar”着重于提升textarea的视觉效果，以增强用户体验。我们将探讨如何利用JavaScript（JS）和其他前端技术来实现这一目标。 首先，textarea的基本样式可以通过CSS进行...
生成图形的外轮廓线outline_轮廓生成_生成外轮廓线_
09-30
在计算机图形学中，生成图形的外轮廓线（Outline）是一项关键的技术，它涉及到了图像处理、几何造型以及渲染等多个领域。"生成图形的外轮廓线outline_轮廓生成_生成外轮廓线_"这个主题主要关注如何高效地提取图形...
outline_JAVA图像的轮廓_java_轮廓识别_endxbh_源码
10-04
在计算机视觉领域，图像的轮廓是识别物体形状和特征的关键因素。在JAVA中，我们可以利用图像处理技术来提取和显示图像的轮廓。本项目由endxbh开发，旨在通过编程方式实现这一功能，这对于模式识别、图像分析以及机器...
UnityFx.Outline：Unity3d的屏幕空间轮廓
02-06
UnityFx.Outline 渠道UnityFx.Outline Github Npm（核心+内置RP） Npm（后处理v2） Npm（URP） Npm（HDRP） 去做需要Unity 2018.4或更高版本。 与兼容。 与兼容。 与兼容（多通道，单通道实例化）。 请提出任何问题...
（学习笔记）css---用户界面（鼠标样式cursor、表单轮廓、文本域防拖拽）
weixin_57516815的博客
06-18 178
1、鼠标样式cursor
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-26 5699
HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。以下方式的劣势就是在放弃拖拽那一刻会触发click事件，通常如果被拖拽元素还有其他点击事件，会重复触发，往往并非业务需求。貌似这段代码没什么屌优势！.....................
鼠标拖拽的两种方法
qq_44704740的博客
11-05 925
<div></div> div { width: 100px; height: 100px; background-color: aqua; cursor: move } // 方式一: var div = document.querySelector('d...
CSS三角、界面样式(cursor、input输入边框不改变颜色、textarea拖拽不改变大小)、vertical-align、溢出文字省略号显示、CSS初始化
Bulut0907
11-08 1691
vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化。当我们选择input输入框，进行文字输入的时候，边框会改变颜色。textarea默认可以在右下角进行拖拽，改变输入框的大小。CSS初始化参考如下。
cursor（鼠标手型）属性
weixin_45328388的博客
12-06 8791
㈠简单介绍在浏览网页时，通常看到的鼠标光标形状有箭头、手形、沙漏等，而在 windows 中实际看到的鼠标指针种类比这个还要多。一般情况下，鼠标光标的形状由浏览器负责控制，大多数情况的光标形状为箭头形状，当指向链接时，光标形状会变成手指形状。cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。㈡属性值 ㈢属性简单讲解cursor属性的默认值为 auto， 它表示由浏览器根据当前上下文，自动确定最适合的光标类型。auto 与 default 不同，
原生js实现元素放大缩小
clhdtzhh的博客
07-07 1355
原生js实现元素的放大缩小
前端必知：29，改变鼠标手势及鼠标手势的应用
最新发布
qq_52799985的博客
07-27 1954
在 CSS 中，鼠标手势（Mouse cursor）是指在光标悬停在特定元素上时，鼠标光标的外观样式。它可以通过 CSS 样式属性来定义，使开发者能够控制光标在不同情况下的外观，从而增强用户体验和交互性。
移动端一些常见的默认样式问题
weixin_30527423的博客
01-29 96
1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角 button{ border-radius: 0; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textarea:focus { outline: none;} 4.去掉高光样式： input:focus{ -webkit-tap-highlight...
CSS用户界面样式
weixin_51415327的博客
08-22 313
1. 鼠标样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.
文本域防止拖拽或者取消边框的做法
05-28
要防止文本域（textarea）的拖拽或者取消边框，可以通过CSS样式进行设置。具体的做法如下： 取消拖拽： ``` textarea { resize: none; } ``` 使用 `resize: none` 样式可以禁用文本域的拖拽功能。 取消边框： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值