CSS 用户界面
03-css2026/11/14
CSS提供了丰富的用户界面属性，用于控制和美化表单元素、鼠标指针、选择文本等交互元素
调整大小 - resize
允许用户调整元素的大小
语法：
.element {
resize: none | both | horizontal | vertical | block | inline;
}
- none: 默认值，禁止调整大小
- both: 允许水平和垂直方向调整大小
- horizontal: 只允许水平方向调整大小
- vertical: 只允许垂直方向调整大小
- block (CSS3新增): 允许在块方向上调整大小（取决于书写模式）
- inline (CSS3新增): 允许在行内方向上调整大小
要使 resize 生效，元素必须满足以下条件之一：
overflow不是visibleoverflow是hidden、auto、scroll等
光标 - cursor
控制鼠标指针的外观。
/* 基础用法 */
.element {
cursor: pointer; /* 手型指针 */
cursor: default; /* 默认箭头 */
cursor: text; /* 文本选择型（I型） */
cursor: move; /* 移动十字箭头 */
cursor: not-allowed; /* 禁止符号 */
cursor: help; /* 帮助问号 */
cursor: wait; /* 等待/加载 */
cursor: progress; /* 进度指示 */
cursor: crosshair; /* 十字线 */
cursor: zoom-in; /* 放大镜+ */
cursor: zoom-out; /* 放大镜- */
cursor: grab; /* 抓取手型 */
cursor: grabbing; /* 抓取中手型 */
}
/* 自定义光标 */
.button {
cursor: url('cursor.png'), auto; /* 自定义图片 */
cursor: url('cursor.svg') 10 5, pointer; /* 自定义偏移量 */
cursor: url('cursor.cur'), url('cursor.png'), default; /* 多格式备用 */
}
应用示例：
/* 可拖拽元素 */
.draggable {
cursor: grab;
}
.draggable:active {
cursor: grabbing;
}
/* 禁用状态 */
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* 可调整大小 */
.resizable {
cursor: nwse-resize; /* 西北-东南方向 */
cursor: nesw-resize; /* 东北-西南方向 */
cursor: col-resize; /* 列调整 */
cursor: row-resize; /* 行调整 */
}
用户选择 - user-select
控制用户能否选择文本
/* 禁止选择文本 */
.no-select {
user-select: none; /* 标准属性 */
-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
/* 允许选择文本 */
.selectable {
user-select: text; /* 只能选择文本 */
user-select: all; /* 点击选择所有内容 */
user-select: auto; /* 默认，浏览器决定 */
user-select: contain; /* 只能在元素内选择（实验性） */
}
应用示例：
/* 按钮禁止选择 */
button {
user-select: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
}
/* 代码块允许选择 */
pre, code {
user-select: text;
}
/* 拖拽时临时禁止选择 */
.dragging {
user-select: none;
}
/* 输入框选择优化 */
input, textarea {
user-select: text;
cursor: text;
}