【CSS 用户界面属性 (Basic user interface)】
CSS 用户界面属性 Basic user interface
- CSS 用户界面属性 Basic user interface
- 1. appearance 属性: 设置 元素的外观样式
- 2. box-sizing 属性: 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)
- 3. caret-color 属性: 设置 插入光标的颜色
- 4. cursor 属性: 设置 元素内 鼠标光标的 形状
- 5. resize 属性: 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)
- 6. user-select 属性: 设置 文本的选中性
- ♣ 结束语 和 友情链接
CSS 用户界面属性 Basic user interface
| 用于 | 属性名 | CSS 版本 |
|---|---|---|
| ① 设置 元素的外观样式。 | appearance |
4 |
② 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)。 |
box-sizing |
4 |
| ③ 设置 插入光标的颜色。 | caret-color |
4 |
| ④ 设置 元素内 鼠标光标的 形状。 | cursor |
2 |
⑤ 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)。 |
resize |
4 |
| ⑥ 设置 文本的选中性。 | user-select |
4 |
- CSS Basic User Interface
- 是一个 CSS 模块
- 用户界面相关的属性: 定义 与用户界面相关的 特性的呈现和功能。
- 相关属性
- ❶
appearance(实验中的属性) - ❷
box-sizing - ❸
cursor - ❹
caret-color - ❺
resize - ❻
user-select(实验中的属性) ime-mode- 属性控制 文本字段的 输入法编辑器(IME)的状态。此属性 已过时。
nav-down(实验中的属性，暂无详细介绍)nav-left(实验中的属性，暂无详细介绍)nav-right(实验中的属性，暂无详细介绍)nav-up(实验中的属性，暂无详细介绍)outline(详情见: 【 CSS 边框和轮廓属性 Border&Outline】 )outline-widthoutline-styleoutline-coloroutline-offset
text-overflow(详情见: 【CSS 文本属性（Text）】 )
- ❶
1. appearance 属性: 设置 元素的外观样式
- ⑴ 设置 元素的外观样式:
appearance- ① 属性的前缀
Gecko(Firefox)中使用-moz-appearance属性，根据操作系统的主题，使用平台 原生样式 显示元素。- 基于
webkit(如 Safari)和基于blink(如 Chrome、Opera)的浏览器使用-webkit-appearance属性来 实现相同的功能。注意，由于 兼容性的原因，Firefox 和 Edge 也支持-webkit-appearance。
- ② 自定义部件
- XUL 样式表中 经常使用此属性 ，来设计具有 平台合适样式的 自定义小部件。
- 它还用于 Mozilla 平台附带的 小部件的 XBL (从 Gecko 57 开始 就被弃用了)实现。
- ③ 浏览器差异
- 尽管在 大多数现代浏览器中都支持它，但是它的实现有很大的差异。
- ① 属性的前缀
- ⑵ 外观样式的 语法和属性值
appearance:none | auto | button | textfield | searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | listbox | meter | progress-bar;- 实际属性值 更多，但浏览器支持度 并不好。
- 初始值:
auto浏览器自动决定。 - 不应用样式:
none
- 初始值:
- 实际属性值 更多，但浏览器支持度 并不好。
/* 用户界面模块版本 4 的值 CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;
/* Gecko中 可用值的 部分列表 */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;
/* WebKit/Blink中可用值的部分列表(以及Gecko和Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;
- ⑶ 外观样式的 浏览器支持
- 需要浏览器前缀:
-moz-,-webkit- 
- 需要浏览器前缀:
- 示例1: 给一个
div元素 设置外观样式。 - ① 外观样式 设置成 按钮样式
-moz-appearance: button;
-webkit-appearance: button;
- ② 复选框的样式
- Firefox 只显示复选框的样式， 元素的本来的文本内容 不见了。
- 谷歌在元素中间 显示复选框
- Firefox 只显示复选框的样式， 元素的本来的文本内容 不见了。
- ③ 设置成单选按钮
- 谷歌中
- ④ 去除单行文本框和 复选框的外观样式
- 原本的样式 :
- 去除外观样式后:
- 原本的样式 :
.inputappearance{
margin: 10px;
-moz-appearance: none;
-webkit-appearance: none;
}
- html
<input type="text" class="inputappearance">
<label ><input type="checkbox" class="inputappearance">动漫label>
2. box-sizing 属性: 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)
- ⑴ 设置元素 宽高属性 的指定区域:
box-sizing- 属性设置 如何计算 元素的总宽度和高度。
- ① 宽高 默认指定区域: 内容区
- 默认情况下，在 CSS 框模型中，分配给元素的 宽度
width和高度height只应用于元素的 内容框 = 内容区 =content box。
- 默认情况下，在 CSS 框模型中，分配给元素的 宽度
- ② 盒子的整体宽高: (存疑: 应该还包括 外边距)
- 如果这个元素有任何的 边框
border或 内边距padding，绘制到屏幕上时的 盒子宽度和高度 会加上设置的边框和内边距值。 - 当调整一个 元素的宽度和高度时 需要时刻注意到 元素的边框和内边距。
- 如果这个元素有任何的 边框
- ③ 适用元素: 能设置 宽度或高度的 所有元素 。
- ⑵ 宽高的 指定区域 和 布局/定位
- ① 布局: 将
box-sizing设置为 边框盒border-box通常对 布局元素很有用。 处理元素的大小 更加容易，并且通常 消除了在布局内容时 可能遇到的许多陷阱。 - ② 定位: 另一方面，当使用
position: relative或position: absolute时，box-sizing: content-box的使用允许 定位值 相对于内容 (存疑: 测试 设置偏移量 仍是整体偏移，相对于内容 是什么意思呢 )，并且独立于 对边框和内边距大小的更改。
- ① 布局: 将
- ⑶ 元素宽高 指定区域的 语法
box-sizing:content-box | border-box;
-
⑷ 元素宽高 指定区域的属性值
-
内容盒(默认) / 边框盒
-
① 内容盒 (默认值):
content-box- 默认值，标准盒子模型。
- 只包括: 内容区的 宽和高。
width= 内容区的宽度。height= 内容区的高度。
width与height的计算值 不包括:- 边框（
border），内边距（padding），外边距（margin）。
- 边框（
- 元素的整体宽度 =
width+内边距+边框 (不考虑外边距的话 )box-sizing: content-box;+width: 200px; height: 100px;
-
② 边框盒:
border-boxwidth和height属性包括: 内容，内边距和边框，但不包括 外边距。width=border+padding+ 内容的宽度height=border+padding+ 内容的高度- 这是当文档处于
Quirks模式 时 IE 使用的盒模型。 box-sizing: border-box;+width: 200px; height: 100px;
- 这是当文档处于
- ③ 内边距盒 (已废弃):
padding-box
-
-
上图 涉及代码
-
html
<div class="divcontainer">
<p class="poem">明日复明日，明日何其多。
我生待明日，万事成蹉跎。p>
div>
- css
/*设置元素 总宽度/高度 的范围*/
.divcontainer{
width: 30%;
height: 10%;
margin: 10px;
padding: 10px;
border: solid 10px darkgreen;
}
.poem{
width: 200px;
height: 100px;
margin: 10px;
border: dashed 10px lightskyblue;
padding: 10px;
box-sizing: border-box;
/*box-sizing: content-box;*/
/*position: relative;*/
/*top: 10px;*/
}
- ⑸ 宽高 指定区域的 浏览器支持
- 谷歌，IE，Firefox 23之前当从
window.getComputedStyle()计算高度时，不考虑box-sizing属性。 
- 谷歌，IE，Firefox 23之前当从
3. caret-color 属性: 设置 插入光标的颜色
- ⑴ 设置 插入光标的颜色:
caret-color， 美 /ˈkærət/- ① 插入光标: 在网页的 可编辑器区域内，指示用户的输入 具体会插入到哪里的，一般会 闪烁 ，形似竖杠
|。 - ② 插入光标 适用的元素:
- ❶
或那些 ❷ 具有 可编辑contenteditable属性的元素。
- ❶
- ③ 插入光标的 默认颜色:
- 默认情况下，它是黑色的，但是它的颜色 可以通过
caret-color属性改变。
- 默认情况下，它是黑色的，但是它的颜色 可以通过
- ① 插入光标: 在网页的 可编辑器区域内，指示用户的输入 具体会插入到哪里的，一般会 闪烁 ，形似竖杠
- ⑵ 插入光标 和 光标
- ① 插入光标（
insertion caret）: 只是光标（caret）的其中一种。 - ② 导航 光标:
- 浏览器 有一种光标 叫做“导航光标“（
navigation caret），它可以在 不可编辑区域内 来回移动。
- 浏览器 有一种光标 叫做“导航光标“（
- ③ 鼠标 指针光标:
- 当鼠标指针移动到一段
cursor属性是auto的文本上方时，或移动到cursor属性是text、vertical-text的內容上方时候，看起来有点像 插入光标，但不是插入光标（caret），而是 鼠标指针光标（cursor）。 
- 当鼠标指针移动到一段
- ① 插入光标（
- ⑶ 插入光标颜色的 语法和属性值
caret-color:auto |= | | currentcolor | - 浏览器决定:
auto- 用户代理为 插入符号 选择适当的颜色。
- 通常是
currentcolor，但是用户代理可以根据currentcolor的值、背景、阴影等因素，选择不同的颜色，以确保与周围的内容 具有良好的 可视性和对比度。
- 合法颜色值:
- 【CSS 颜色的 合法颜色值 (详细介绍)】
- ⑷ 插入光标的颜色的 浏览器支持
-
示例1: 改变单行文本的 插入光标的颜色。
- -
html
姓名: <input type="text" class="caretColor">
- css
/*插入光标的颜色*/
.caretColor{
/*margin: 10px;*/
width: 100px;
height: 20px;
caret-color: red;
}
4. cursor 属性: 设置 元素内 鼠标光标的 形状
- ⑴ 设置 元素内 鼠标光标的 形状:
cursor属性，美 ['kɝsɚ]- 设置 鼠标指针 悬浮在元素上方时， 显示的 鼠标光标的 形状。
- ⑵ 鼠标光标形状的 语法
cursor:[ [[ ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]; - 鼠标光标形状 默认值：
auto
/* 关键字值 Keyword value */
cursor: pointer;
cursor: auto;
/* URL，带有关键字的回退 */
cursor: url(hand.cur), pointer;
/* URL和坐标，以及关键字的回退 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* 全局值 Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
-
⑶ 光标形状的 属性值
- ① 浏览器决定 (默认值):
auto- 浏览器 设置的光标。
- 用户代理 将根据 当前的内容 确定要显示的光标。
- ② 图像光标
url地址- ★ 图像地址和回退:
- ❶ 零个 或 ❷ 多个
- 浏览器将 尝试加载 指定的第一个图像，如果无法加载 则返回下一个图像，如果 无法加载图像或未指定图像，则使用 关键字值。
- ❶ 零个 或 ❷ 多个
- ★ 光标 相对于 图像左上角的点 偏移:
- 每个
- ❶ 可选的
x和y坐标。两个 ❷ 小于32的 ❸ 无单位 ❹ 非负数。 - 这些将设置 光标的热点(
hotspot)，相对于 图像的左上角。 cursor: url(one.svg), url(two.svg) 5 5, progress;
- ❶ 可选的
- 每个
- ★ 图像地址和回退:
- ① 浏览器决定 (默认值):
-
示例1: 设置 光标图像,不设置
x,y热点cursor: url("../images/star.png"),crosshair;- 鼠标光标 在 超出 上边框和左边框的时候, 就会消失 不显示了。
-
示例2: 设置光标图像的同时,设置 热点坐标。
cursor: url("../images/star.png") 20 20,crosshair;- 光标 可以根据 热点设置的
x,y超出 上边框和左边框 一定距离。 
- 更多属性值,如下 ↓
- 属性值 总共分为 7 类
- html
<div class="divcontainer">
<p class="poem">明日复明日，明日何其多。
我生待明日，万事成蹉跎。p>
div>
- css
/*设置元素的父元素*/
.divcontainer {
width: 30%;
height: 10%;
margin: 10px;
padding: 10px;
border: solid 10px darkgreen;
}
.poem {
width: 200px;
height: 100px;
margin: 10px;
border: dashed 10px lightskyblue;
padding: 10px;
box-sizing: border-box;
/*⑴ 通用光标类型值*/
/*cursor: auto;*/
/*cursor: none;*/
/*cursor: default;*/
/*⑵ 链接和状态*/
cursor: context-menu;
cursor: help;
cursor: pointer;
cursor: progress;
cursor: wait;
/*⑶ 选择*/
cursor: cell;
cursor: crosshair;
cursor: text;
cursor: vertical-text;
/* ⑷ 拖放 */
cursor: alias;
cursor: copy;
cursor: move;
cursor: no-drop;
cursor: not-allowed;
cursor: grab;
cursor: grabbing;
/* ⑸ 重设大小 和 滚动 */
cursor: all-scroll;
cursor: col-resize;
cursor: row-resize;
cursor: n-resize;
cursor: e-resize;
cursor: s-resize;
cursor: w-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
/*⑹ 放大缩小*/
cursor: zoom-in;
cursor: zoom-out;
/* ⑺ 设置 光标的图像 和 图像的热点*/
/*cursor: url("../images/star.png"),crosshair;*/
/*cursor: url("../images/star.png") 20 20,crosshair;*/
/*cursor: url("../images/star.png") 32 20,crosshair;*/
}
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑴ 通用 | ① 浏览器 根据当前内容 决定指针样式。 | auto | 不固定。 | 文本和非文本的地方 显示不一样的光标: 工字型和箭头的。  |
| ② 默认指针，通常是 箭头形状。 | default |  |
文本和非文本的地方: 显示的 都是箭头形状。 |
|
| ③ 不显示光标。 | none | 不显示 任何光标形状。 | 一进入元素内部，光标就消失了。 不显示任何光标了。  |
|
| ⑵ 链接和状态 | ① 指针下有 可用 内容目录。只有 windows 中的 IE 10,11有效。 | context-menu |  |
 |
| ② 指示帮助。 帮助信息 是可用的。 |
help |  |
箭头带个问号?  |
|
| ③ 光标是 指示链接的指针。通常是 带指向的小手 的图像。 | pointer |  |
 |
|
| ④ 程序 ❶ 后台繁忙，用户 ❷ 仍可交互 (与 wait 不同)。 形状时 一个箭头+ 一个转圈的圆 或 沙漏。 |
progress |   |
 |
|
| ⑤ 程序很忙，用户要等待⇒ 无法与界面交互 (与 progress 相反)。 形状: 不带箭头的 沙漏 或 圆圈的图像。 |
wait |   |
 |
|
| ⑶ 选择 | ① 指示 单元格可被选中。 形状: 粗体 加号。 |
cell |  |
 |
| ② 交叉光标，常指示 位图 中的选择。 形状: 细 十字线。 |
crosshair |  |
 |
|
| ③ 指示 文本 可被选中 。 形状: 工 字型。 |
text |  |
 |
|
| ④ 指示 垂直文本 可被选中。 形状: 侧倒的 工 字型。 |
vertical-text |  |
 |
|
| ⑷ 拖放 | ① 复制 或 快捷方式 将要被创建。 形状: 箭头 + 一个回旋的箭头。 |
alias |  |
 |
| ② 指示 可复制。 形状: 箭头 + 一个小加号。 |
copy |  |
 |
|
| ③ 可被移动的。 形状: 交叉的 双向箭头。 |
move |  |
 |
|
| ④ 项目 在当前位置 不能被放下。 bug: 在Windows 和Mac OS X上，no-drop 等同于not-allowed。 |
no-drop | 实际显示的形状: 不带小手。 |
 |
|
| ⑤ 请求的操作将 不被执行。 | not-allowed |  |
|
|
| ⑥ 可以被抓取 (拖动来移动)。 形状: 一个张开的 小手。 |
grab |  |
 |
|
| ⑦ 被抓住/抓取中 (拖着移动)。 形状: 一个小拳头,手指短了很多。 |
grabbing |  |
 |
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑸ 重设大小 和 滚动 | ① 可以在 任意方向 滚动。 | all-scroll |  在Windows上， all-scroll 和 可移动 move 是一样的形状，如下。 谷歌和火狐中 和 move 一样的形状。 IE11中测试 是正常的样式。  |
 |
| ② 项目/列 可以 水平调整大小。 形状: 竖线 分隔左右箭头 来表示。 |
col-resize |  |
 |
|
| ③ 项目/行 可以 垂直调整大小。 形状: 用 横杠 分隔 向上和向下的箭头 来表示。 |
row-resize |  |
 |
|
| ④ *-resize 格式，某条边 可被移动。 单向和双向: 部分单向的光标， 在 IE,Firefox,Chrome 中， 会显示一个 等效的 双向 调整大小光标。 |
❶ n-resize | 北 实际显示: 南北双向  |
 |
|
| ❷ e-resize | 东 实际显示: 东西双向 |
 |
||
| ❸ s-resize | 南 实际显示: 南北双向 |
|
||
| ❹ w-resize | 西 实际显示: 东西双向 |
|
||
| ❺ ne-resize | 东北 实际显示: 东北+西南 双向  |
 |
||
| ❻ nw-resize | 西北 实际方向: 西北+东南 双向  |
 |
||
| ❼ se-resize | 东南 实际方向: 西北+东南 双向 |
|
||
| ❽ sw-resize | 西南 实际显示: 东北+西南 双向 |
|
||
| ⑤ *-resize 格式，设置双向。 | ❶ ew-resize | 东西 |
|
|
| ❷ ns-resize | 南北 |
|
||
| ❸ nesw-resize | 双向: 东北+西南 |
|
||
| ❹ nwse-resize | 双向: 西北+东南 |
|
- 形状 等同的属性值 (因为一些浏览器中 单向 显示成双向)
12个值⇒ 实际上 只有 4 个双向的箭头 方向。- n: north 北
- s: south 南
- e: east 东
- w: west 西
- ① 东= 西= 东西:
e-resize=w-resize=ew-resize(东西, 东在前) =
- ② 南= 北 = 南北:
s-resize=n-resize=ns-resize(南北, 北在前) =
- ③ 东北 = 西南 = 东北西南 =
ne-resize=sw-resize=nesw-resize(南北,在东西前面) =
- ④ 西北 = 东南 = 西北东南 =
nw-resize=se-resize=nwse-resize=
| 属性值分类 | 用于 | 属性值 | 形状 | 示例 |
|---|---|---|---|---|
| ⑹ 放大缩小 | 放大 | zoom-in |  |
 |
| 缩小 | zoom-out |  |
 |
- ⑷ 鼠标光标形状的 浏览器支持
- IE 有部分属性值不支持:
grab,grabbing,,url的偏移值,vertical-text,zoom-in,zoom-out - 安卓的火狐版本不支持 鼠标光标形状。
- IE 有部分属性值不支持:
5. resize 属性: 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)
- ⑴ 设置元素的 可调整性 和 调整方向:
resize属性- 属性设置元素 是否 可调整大小，如果可以，则设置 调整大小的方向。
- ① 适用元素: 块级元素、替换元素、表格单元格 或 内联块元素。
- 设置
overflow≠visible的 ❶ 元素。- 即使 没有文本溢出，只要设置
overflow属性值，且overflow≠visible的值了⇒resize就会有效。
- 即使 没有文本溢出，只要设置
- 存疑: 表示 图像 (
images)或视频(videos)，以及 内联框架iframe的 ❷ 可选替换元素。- 原话: and optionally replaced elements representing images or videos, and iframes.
- 测试:
resize属性无效 。 (存疑: 此处指的元素 是什么? )
- 设置
- ② 默认可调整的元素