CSS高级技巧④——用户界面样式
文章目录[隐藏]
鼠标/光标样式cursor：
| 属性值 | 描述 |
|---|---|
auto |
默认光标。 |
default |
标准箭头光标。 |
pointer |
手指光标，表示链接。 |
progress |
进度指示器光标，表示操作正在进行中。 |
wait |
等待光标，表示用户应等待。 |
text |
文本光标，表示可选择文本。 |
move |
移动光标，表示可拖动对象。 |
not-allowed |
不允许光标，表示不允许执行操作。 |
e-resize |
东方调整大小光标，表示可调整东方边缘。 |
ns-resize |
垂直调整大小光标，表示可调整垂直边缘。 |
具体效果的话，运行下面的代码然后就能看见效果了，就不一一演示了。
<ol>
<li style="cursor: auto;">auto 默认光标。</li>
<li style="cursor: default;">default 标准箭头光标。</li>
<li style="cursor: pointer;">pointer 手指光标，表示链接。</li>
<li style="cursor: progress;">progress 进度指示器光标，表示操作正在进行中。</li>
<li style="cursor: wait;">wait 等待光标，表示用户应等待。</li>
<li style="cursor: text;">text 文本光标，表示可选择文本。</li>
<li style="cursor: move;">move 移动光标，表示可拖动对象。</li>
<li style="cursor: not-allowed;">not-allowed 不允许光标，表示不允许执行操作。</li>
<li style="cursor: e-resize;">e-resize 东方调整大小光标，表示可调整东方边缘。</li>
<li style="cursor: ns-resize;">ns-resize 垂直调整大小光标，表示可调整垂直边缘。</li>
</ol>表单的轮廓线outline：
取消轮廓线：
在我们写完表单的input框的时候，经常性的遇到一个问题，那就是选中后外边框特别的不好看，就想图片里面的边框一样。
那么我们可以使用CSS的outline然后将它属性值改为0或者none就能删除啦。
代码：
<head>
<style>
input {
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="造梦空间论坛">
</body>防止拖拽文本域resize：
在很多地方都会使用到文本域标签，比如说我们下面的留言功能。
但是大家有没有发现一点，对比一下传统的文本域，右下角是不是少了点什么东西？
就是这个拖拽大小，如果不吧这个删除，很容易导致大小变化影响布局，那么我们删除这个也很简单，只需要把给他加一个CSS属性resize即可。
源码：
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea name="造梦空间论坛" id="" cols="30" rows="10"></textarea>
</body>
没有回复内容