如何将表单元素中轮廓线去掉

本篇文章介绍CSS3中增强用户界面的关于溢出、缩放、轮廓、鼠标事件、文本选中等属性的使用。这些属性基本上得到了大部分浏览器的支持，可以在代码中直接书写。

承接文章：CSS3盒模型尺寸计算方法，box-sizing属性的使用，你知道吗？

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

CSS3所提供的增强用户界面的属性以及与此相关的属性比较多，小海前端（头条号）将分几次对其进行讲解。所包含的所有增强用户界面的属性包括：

box-shadow
box-sizing
overflow-x
overflow-y
resize
outline
outline-width
outline-style
outline-color
outline-offset
pointer-events
user-select
appearance
content
counter-increment
counter-reset
quotes

本篇文章为大家讲解上述粗体显示的五组增强用户界面属性。

一、全新的溢出设置：

CSS3技术将原有的overflow属性划分为两个方向的溢出属性。

overflow-x，设置水平方向的溢出解决方案。
overflow-y，设置垂直方向的溢出解决方案。

这两个属性的取值和overflow属性相同，可以取如下值：

auto，自动，当发生溢出时，才出现滚动条。
visible，溢出的部分依然可见。
hiddle，溢出的部分隐藏。
scroll，若发生溢出，则强制显示滚动条。

如果小伙伴们有不熟悉overflow属性的用法的，可以参看小海前端（头条号）写的《CSS三个重要的定位属性，使用频率超高，定位属性详解》一文。

二、任意元素都可以缩放：

什么叫做元素缩放呢？我们来看小伙伴们都非常熟悉的表单元素：多行文本域。

<textarea name=”introduce” rows=”10” cols=”30”></textarea>

下图为我们展示了多行文本域在Google Chrome浏览器中的外观。

多行文本域自带缩放调整功能

我们可以清晰地看出，在多行文本域的右下角有一个可以用来调整控件尺寸的位置图标，用户利用鼠标拖拽该图标就可以改变多行文本域的显示大小。

如果希望一个普通的块级元素也具备该拖拽图标，那应该怎么解决呢？

CSS3提供了resize属性来完成该功能。

CSS3技术使用resize属性来设置对象是否具备缩放功能

该属性可以取如下值：

none，块级元素不具备右下角拖拽图标。
horizontal，块级元素具备只可以改变水平方向宽度的拖拽图标。
vertical，块级元素具备只可以改变垂直方向高度的拖拽图标。
both，块级元素具备可以同时改变宽度和高度的拖拽图标。

1、该属性使用时必须结合溢出属性。

要想让右下角的拖拽图标生效，必须设置块级元素的溢出属性，并且溢出属性的取值还不得为visible。

2、可以结合下列CSS3属性来控制块级元素拖拽的尺寸范围。

min-width，设置可拖拽范围的最小宽度。
max-width，设置可拖拽范围的最大宽度。
min-height，设置可拖拽范围的最小高度。
max-height，设置可拖拽范围的最大高度。

让我们通过一个简单的实例来实现块级元素的缩放效果。

例：在页面中有一个<div></div>块级元素,其id属性取值为box，内部包含任意文本。设置该块级元素的宽度为200像素，高度为200像素。通过CSS3设置要求该块级元素能够自由缩放，且宽度和高度不超过400像素。

CSS代码如下所示：

#box{
width:200px; height:200px;
overflow:hidden;
resize:both;
max-width:400px;
max-height:400px;
}

三、元素本身的轮廓：

什么是元素轮廓呢？我们来看小伙伴们都非常熟悉的表单元素：文本域。

<input type=”text” name=”nick” />

下图为我们展示了文本域在Google Chrome浏览器中获得鼠标焦点时的外观。

文本框获得焦点时显示的对象轮廓

我们可以清晰地看出，当文本域获得鼠标焦点时，在其边框位置处又一圈淡蓝色的线条对其进行包裹，这就是文本框的轮廓。

CSS3提供了outline及其派生属性来调整元素的轮廓，其派生属性包括：

outline-width，设置元素的轮廓宽度。
outline-color，设置元素的轮廓颜色。
outline-style，设置元素的轮廓样式。

除此之外，CSS3还提供了用来设置轮廓偏移的属性：

loutline-offset，该属性不是outline属性的派生属性，因此必须单独使用。

属性outline的取值格式如下所示：

outline:<outline-style> <outline-width> <outline-color>

要想去掉表单元素中自带的轮廓属性，可以设置outline属性的取值为none。

input[type=text]:focus{
outline:none;
}

上段代码设置当type属性取值为text的<input />标记获得鼠标焦点时，将其自带的轮廓隐藏。

例：我们来为一个块级元素设置轮廓效果。

#box{
outline:solid 1px #7a9cd3;
outline-offset:10px;
}

下图为我们展示了上段CSS代码中轮廓的效果。

轮廓线的偏移效果

默认情况下，轮廓会占据边框的位置。由于outline-offset属性的设置，可以看出，轮廓从边框位置向外偏移了10像素的距离。

四、对元素取消鼠标事件：

CSS3提供了一个名为pointer-events的属性，用来设置对象不能成为鼠标事件的目标。

该属性的取值较多，但是大部分取值主流浏览器尚不支持，当该属性取值为none时，对象就不再是鼠标事件的目标了。

CSS3技术使用pointer-events属性取值none来取消元素的鼠标事件

若设置了对象不再是鼠标的事件目标，则该对象上绑定的事件代码将不再生效。鼠标单击该对象时，这个鼠标动作会自动作用在该对象下方的对象上。

五、是否允许选中文本：

CSS3提供了一个名为user-select的属性，用来设置在页面中是否允许文本被选中。

CSS3技术使用user-select属性设置是否允许文本被选中

该属性可以取如下值：

none，对象内部的文本不允许被选中。
text，对象内部的文本允许被选中。
all，对象内部的文本只允许作为一个整体被选中。

在CSS2时代，要想让页面文本不允许被鼠标选中，只能使用JavaScript技术编写代码。有了user-select属性，实现这一效果变得更加简单。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。