从一个小光标说起：藏在网页里的交互语言

今天我在浏览一个网页，无意间把鼠标移到一段普通的文字上，文字之间就出现在输入框里才能看到的闪动着的一个竖条的光标。

奇怪，这里明明没有输入框啊？

天天看浏览器，我竟然没注意到这个小细节，看了一些东西后，还发现一些有意思的东西。

为什么没有输入框，也会出现文字光标？

直接原因很简单——CSS 的 cursor 属性。

1	cursor: text;

开发者可以把这个属性加在任何元素上，让鼠标悬停时显示 I 形光标，哪怕那里根本没有输入框。

但更有趣的是：即使开发者什么都不做，浏览器也会在普通文字段落上自动显示这个光标。 这是浏览器的默认行为——它在告诉你”这里的文字可以被选中”。这一行为其实完全符合 W3C 规范，只是大多数人从来没注意过。

I 形光标从哪里来？

这个东西叫做 I-beam（工字钢），其历史可以追溯到打字机时代。

打字机内部有一个 I 字形截面的导槽零件，用于引导字模运动。后来，Xerox PARC 在 1970 年代设计人类历史上第一批 GUI 系统时，借用了这个形状来表示”文字编辑区域”。再后来，Apple、Microsoft 相继继承，I 形光标就这样从一个工业零件，一路活到了今天所有人的屏幕上。

一个上世纪的机械零件形状，就这样穿越时代，成为了全球通用的数字符号。

cursor 属性：一套被忽视的语义系统

大多数人只知道 pointer（小手，表示可点击）和 text（I 形，表示可选文字），但 CSS 规范里定义了几十种光标，每一种都在无声地传递信息：

cursor: grab;        /* 张开的手——可以拖拽 */
cursor: grabbing;    /* 握紧的手——拖拽中 */
cursor: not-allowed; /* 禁止符号——这里不让操作 */
cursor: zoom-in;     /* 放大镜——可以放大 */
cursor: crosshair;   /* 十字准星——图像编辑模式 */
cursor: col-resize;  /* 左右箭头——调整列宽 */
cursor: wait;        /* 转圈——请稍候 */
cursor: cell;        /* 表格十字——选择单元格 */

这些光标形态，构成了一套无需文字说明的”操作提示语言”，用户在几十年的习惯中已经内化了它们的含义。

甚至，光标可以完全自定义：

1	cursor: url('my-cursor.png'), auto;

早年个人主页盛行的时候，自定义光标（星星、魔法棒、剑……）曾是网页设计的一大流行风潮。后来大家意识到：破坏用户对光标的预期，会严重干扰操作体验，这股风潮才渐渐退去。

没有输入框的”输入框”：contenteditable

HTML 有一个有点神奇的属性：

1	<div contenteditable="true">你可以直接编辑这段话</div>

任何元素加上 contenteditable，就变成了可以打字的编辑区——光标会变成 I 形，你可以输入、删除、粘贴，但它根本不是 <input> 或 <textarea>。

Notion、飞书文档、语雀的编辑区，底层大多就是基于这个原理实现的。它比传统输入框灵活得多，可以嵌套复杂的格式和结构。

看得见却选不中：user-select

1	user-select: none;

加了这行，文字就在那里，肉眼清晰可见，但就是无法选中、无法复制。不少版权敏感的网站用这个来阻止内容被轻易抓取。

不过这只是”视觉障碍”——打开浏览器开发者工具，HTML 源码里文字原原本本都在。它拦住的是普通用户，拦不住真正想要的人。

透明的幽灵：pointer-events

1	pointer-events: none;

这个属性让一个元素对所有鼠标事件”隐形”——你的鼠标可以直接穿透它，点击到下方的元素。常用于做浮动遮罩、标注层，视觉上存在，交互上消失，有一种幽灵般的质感。

最极端的一种：让光标彻底消失

1	cursor: none;

直接隐藏系统光标。一些沉浸式艺术网站或网页游戏会这样做，然后用 JavaScript + Canvas 绘制一个”假光标”跟随鼠标运动，实现系统光标完全无法实现的动画效果——粒子尾迹、弹性跟随、形态变换……

小结

鼠标光标不只是一个箭头——它是横跨工业设计与数字界面的符号系统，每次形态变化都在告诉你：这里能点、能拖、能选、不让碰。大多数人从不注意它，但它一直在和你沟通。