CSS 用户界面属性 Basic user interface
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-width
outline-style
outline-color
outline-offset
text-overflow
(详情见: 【CSS 文本属性(Text)】 )
- ❶
1. appearance 属性: 设置 元素的外观样式
- ⑴ 设置 元素的外观样式:
appearance
- ① 属性的前缀
Gecko
(Firefox)中使用-moz-appearance
属性,根据操作系统的主题,使用平台 原生样式 显示元素。- 基于
webkit
(如 Safari)和基于blink
(如 Chrome、Opera)的浏览器使用-webkit-appearance
属性来 实现相同的功能。注意,由于 兼容性的原因,Firefox 和 Edge 也支持-webkit-appearance
。
- ② 自定义部件
- ③ 浏览器差异
- 尽管在 大多数现代浏览器中都支持它,但是它的实现有很大的差异。
- ① 属性的前缀
- ⑵ 外观样式的 语法和属性值
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-box
width
和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/- ① 插入光标: 在网页的 可编辑器区域内,指示用户的输入 具体会插入到哪里的,一般会 闪烁 ,形似竖杠
|
。 - ② 插入光标 适用的元素:
- ❶
<input>
或那些 ❷ 具有 可编辑contenteditable
属性的元素。
- ❶
- ③ 插入光标的 默认颜色:
- 默认情况下,它是黑色的,但是它的颜色 可以通过
caret-color
属性改变。
- 默认情况下,它是黑色的,但是它的颜色 可以通过
- ① 插入光标: 在网页的 可编辑器区域内,指示用户的输入 具体会插入到哪里的,一般会 闪烁 ,形似竖杠
- ⑵ 插入光标 和 光标
- ① 插入光标(
insertion caret
): 只是光标(caret
)的其中一种。 - ② 导航 光标:
- 浏览器 有一种光标 叫做“导航光标“(
navigation caret
),它可以在 不可编辑区域内 来回移动。
- 浏览器 有一种光标 叫做“导航光标“(
- ③ 鼠标 指针光标:
- 当鼠标指针移动到一段
cursor
属性是auto
的文本上方时,或移动到cursor
属性是text
、vertical-text
的內容上方时候,看起来有点像 插入光标,但不是插入光标(caret
),而是 鼠标指针光标(cursor
)。
- 当鼠标指针移动到一段
- ① 插入光标(
- ⑶ 插入光标颜色的 语法和属性值
caret-color
:auto | <color>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
- 浏览器决定:
auto
- 用户代理为 插入符号 选择适当的颜色。
- 通常是
currentcolor
,但是用户代理可以根据currentcolor
的值、背景、阴影等因素,选择不同的颜色,以确保与周围的内容 具有良好的 可视性和对比度。
- 合法颜色值:
<color>
- ⑷ 插入光标的颜色的 浏览器支持
-
示例1: 改变单行文本的 插入光标的颜色。
- -
html
<!--插入光标的颜色-->
姓名: <input type="text" class="caretColor">
- css
/*插入光标的颜色*/
.caretColor{
/*margin: 10px;*/
width: 100px;
height: 20px;
caret-color: red;
}
4. cursor 属性: 设置 元素内 鼠标光标的 形状
- ⑴ 设置 元素内 鼠标光标的 形状:
cursor
属性,美 ['kɝsɚ]- 设置 鼠标指针 悬浮在元素上方时, 显示的 鼠标光标的 形状。
- ⑵ 鼠标光标形状的 语法
cursor
:[ [ <url> [ <x> <y> ]? , ]* [ 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
地址- ★ 图像地址和回退:
- ❶ 零个 或 ❷ 多个
<url>
值。最后 末尾的位置 必须填一个 ❸ 关键字值,它们之间用 ❹ 逗号分隔。<url>
指向一个 图像文件。- 浏览器将 尝试加载 指定的第一个图像,如果无法加载 则返回下一个图像,如果 无法加载图像或未指定图像,则使用 关键字值。
- ❶ 零个 或 ❷ 多个
- ★ 光标 相对于 图像左上角的点 偏移:
<x><y>
- 每个
<url>
后面都可选跟 一对 ❶ 空格分隔的数字<x><y>
表示 ❷ 光标的热点/偏移。- ❶ 可选的
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.
- 测试:
<img>
图片元素中resize
属性无效 。 (存疑: 此处指的元素 是什么? )
- 设置
- ② 默认可调整的元素
<textarea>
元素 在默认情况下 是可调整大小的。可以使用resize
属性 覆盖此行为。
- ③ 不适用元素
- ❶ 行内元素(
Inline elements
) - ❷ 将
overflow
=visible
(默认值) 的块元素。
- ❶ 行内元素(
- ⑵ 可调整性和方向的 语法
resize: none | both | horizontal | vertical | block | inline;
/* 关键字值 Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* 全局值 Global values */
resize: inherit;
resize: initial;
resize: unset;
- ⑶ 可调整性和方向 属性值
- ① 不可调整大小 (默认值):
none
- 元素 不能被 用户缩放。
- 元素没有提供 用户可控制的方法 来调整它的大小。
- 默认显示 =
resize: none;
- 不可调整,也没有 可调整的按钮。
- ② 水平垂直-双向可调整:
both
- 允许用户 在水平和垂直方向上 调整元素的大小。
- 元素显示了一种 允许用户 调整大小的 机制,可以 水平或垂直地 调整大小。
- ③ 水平可调整:
horizontal
,美 /ˌhɔːrɪˈzɑːntl/- 允许用户 在水平方向上 调整元素的大小。
- 元素显示了一种 允许用户 在水平方向 调整大小的机制。
- ④ 垂直可调整:
vertical
- 允许用户 在垂直方向上 调整元素的大小。
- 元素显示了一种 允许用户 在垂直方向 调整大小的机制。
- ⑤ 按块的方向:
block
= 块级元素的排列方向。(浏览器 支持度差)- 元素显示了一种 允许用户 按块方向 调整大小的机制。
- 水平或垂直,取决于 书写模式(
writing-mode
)和方向(direction
) 的值。
- ⑥ 按内联方向:
inline
= 内联级元素的 排列方向。(浏览器 支持度差)- 元素显示了一种允许用户在内联方向。
- ① 不可调整大小 (默认值):
- 上图 涉及的代码
- html
<div class="divcontainer">
<p class="poem">明日复明日,明日何其多。
我生待明日,万事成蹉跎。</p>
</div>
- css
.divcontainer {
width: 30%;
height: 10%;
margin: 10px;
padding: 10px;
border: solid 10px darkgreen;
}
.poem {
/*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 */
/*width: 100px;*/
/*height: 50px;*/
margin: 10px;
border: dashed 10px lightskyblue;
padding: 10px;
/*不许换行⇒ 文本溢出⇒ 使用 resize 属性有效前提1,如果没设置这个 只要设置 overflow≠ visible的值了 resize 属性也有效 */
/*white-space: nowrap;*/
/*溢出不能可见 overflow≠ visible⇒ 使用 resize 属性有效 必须前提*/
overflow: auto;
/*overflow: hidden;*/
/*overflow:scroll;*/
/* 可调整属性和调整方向 */
resize: none;
resize: both;
/*resize: horizontal;*/
/*resize: vertical;*/
}
- ⑷ 可调整型和方向的 浏览器支持
- 对
<iframe>
没有效果。
- 对
6. user-select 属性: 设置 文本的选中性
- ⑴ 设置 文本选中性:
user-select
属性- 设置 用户 能否选中文本。
- ⑵ 文本选中性的 语法
user-select
:auto | text | none | contain | all;
/* 关键字值 Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* 全局值 Global values */
user-select: inherit;
user-select: initial;
user-select: unset;
/* 前缀 Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* 前缀 WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* 在 Safari 中无效; 仅使用
"none" or "text", 否则 it will
allow typing in the <html> container */
/* 前缀 Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
- ⑶ 文本选中性的 属性值
- ① 文本不可选中:
none
- 元素及其子元素的 文本不可选中。
Selection
对象可以包含这些元素。
- 从Firefox 21开始,
none
表现的像-moz-none
,因此可以使用-moz-user-select: text
在子元素上 重新启用选择。- 默认: 父子的内容都是 可以选中的,设置 不可选中后⇒ 都无法再选中,过程如下
- 默认: 父子的内容都是 可以选中的,设置 不可选中后⇒ 都无法再选中,过程如下
- 元素及其子元素的 文本不可选中。
- ② 浏览器决定(默认值):
auto
- 根据不同情况决定,
auto
的计算值 确定如下:- 在
::before
和::after
伪元素上- 计算值是
none
。
- 计算值是
- 元素 = 可编辑元素
- 计算值是
contain
。
- 计算值是
- 否则,父元素的
user-select
的计算值为all
- 计算值则为
all
- 计算值则为
- 否则,父元素的
user-select
的计算值为none
- 计算值则为
none
- 计算值则为
- 否则,计算值则为:
text
- 普通元素,默认值是 auto,一般都是可选中的。
- 在
- 根据不同情况决定,
- ③ 可以选中文本:
text
- 用户可以选择文本。
- ④ 整体选中(父子一起):
all
- 父⇒ 子: 如果一个选择 包含元素的一部分,那么该选择 必须包含 整个元素,包括它的 所有后代。
- 子⇒ 父: 如果在子元素中 发生了双击 或 单击内容,则将选择 具有此值的 最高祖先。
- 在父元素或者子元素中的任意位置 单击一下,就会 同时选中 父子中的所有内容。
- ⑤ 元素内:
contain
(=element
,IE-specific alias)- 允许选择 在元素内开始; 但是,选择将包含在 该元素的边界内。
element
=contain
仅在 IE 中受支持。
- 文本选中性 和 继承
- 在不同浏览器之间 实现的一个区别是 继承。
- 在 Firefox 中,
-moz-user-select
不会被 绝对定位的元素继承,但在 Safari 和Chrome中,-webkit-user-select
由这些元素继承。
- ① 文本不可选中:
- 上图的 代码
- html
<div class="divcontainer">
明日歌
<p class="poem">明日复明日,明日何其多。
我生待明日,万事成蹉跎。</p>
</div>
- css
/*设置 元素的包含块 */
.divcontainer {
width: 20%;
height: 10%;
margin: 10px;
padding: 10px;
border: solid 10px darkgreen;
text-align: center;
font-weight: bold;
/* 设置文本的可选择性 */
user-select: none;
/*user-select: auto;*/
/*user-select: text;*/
/*user-select: all;*/
/*user-select: contain;*/
/*user-select: element;!*IE中*!*/
}
.poem {
/*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 */
/*width: 100px;*/
/*height: 50px;*/
margin: 10px;
border: dashed 10px lightskyblue;
padding: 10px;
font-weight: normal;
letter-spacing: 1px;
/*子元素中 重启文本选中*/
/*user-select: text;*/
}
- ⑷ 文本选中性的 浏览器支持
- 需要浏览器前缀:
-webkit-
,-ms-
,-moz-
- 属性值
contain
的浏览器支持 很差。
- 需要浏览器前缀:
♣ 结束语 和 友情链接
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/103494965
- 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!