18.用户界面样式

目录

1  鼠标样式 cursor

2  表单轮廓线 outline

3  文本域防止拖拽 resize

---

1  鼠标样式 cursor

鼠标样式的属性是cursor，它的语法是这样的

它有下面五个常用的样式

• default 白色光标，大部分元素的默认值
• pointer 手型光标
• move 移动光标,十字的内种
• text 文本光标
• not-allowed 禁止光标

我们做一个例子

现在我将鼠标放到红色区域，鼠标就会变成移动光标的样式，我当前截图截不了鼠标

cursor只对元素生效，如果直接给body，那就是对body中的每一个元素生效，但是放在body背景(元素的空隙)中是无法生效的

2  表单轮廓线 outline

我们先搞一个表单

表单中黑色的边框就是表单轮廓线

我们可以通过border设置其一开始的样式

但却无法通过focus设置其聚焦后的边框样式

发现边框并没有改变

这是因为它有原来的边框样式，我们现在使用outline:none取消它的边框样式

• outline:0也可以

这样它聚焦时的边框就变成我们想要的样式了

如果没在聚焦时设置边框，且outline:none，它就会显示未聚焦时边框的样式

3  文本域防止拖拽 resize

我们先搞一个文本域

我们拖动这里是可以将文本域放大或缩小的

大多数情况我们是不想让用户可以拖拽的，所以我们要将resize:none设置给textarea

打开后我们发现文本域的右下角改变大小的图标消失了，拖拽的功能也随之消失了

我们的文本域在聚焦状态也有一种边框样式，如果想取消这种样式，将outline置于none即可