用户界面
resize 调整大小、cursor 鼠标样式、caret-color 光标颜色
用户界面
CSS 的 UI 属性控制鼠标样式、元素拖拽调整、光标颜色等细节。
学完本章你将： 掌握 resize/cursor/caret-color/user-select。
cursor 鼠标样式
css
.pointer { cursor: pointer; } /* 手指 */
.text { cursor: text; } /* 文字光标 I */
.move { cursor: move; } /* 移动 */
.not-allowed { cursor: not-allowed; } /* 禁止 */
.wait { cursor: wait; } /* 等待 */
.grab { cursor: grab; } /* 可抓取 */
.zoom-in { cursor: zoom-in; } /* 放大 */
.help { cursor: help; } /* 帮助 */resize 调整大小
css
/* 允许用户拖拽调整尺寸（对 overflow:auto 的元素） */
.resizable {
overflow: auto;
resize: both; /* both/horizontal/vertical/none */
width: 300px;
height: 200px;
border: 1px solid #ddd;
}caret-color 光标颜色
css
input { caret-color: #4CAF50; } /* 输入光标变为绿色 */
textarea { caret-color: red; }user-select 禁止选中
css
.no-select { user-select: none; } /* 禁止选中文字 */
.select-all { user-select: all; } /* 点击自动全选 */
.select-text { user-select: text; } /* 可选中（默认） */实用组合
css
/* 按钮不选中文字 */
.btn { user-select: none; cursor: pointer; }
/* 代码块可全选 */
code { user-select: all; cursor: text; }