在CSS3增强用户界面的新属性中，提供了一个名为appearance的属性。该属性的大部分取值主流浏览器是不兼容的，但是仅有的两个取值一定有很强的用途。本篇文章小海前端（头条号）就为大家来介绍该属性的用法，并通过一个简单的实例结合上一篇文章中讲到的几个CSS3属性来学习它们的综合用法。

承接文章：CSS3增强用户界面属性，有关溢出、缩放、轮廓与文本选中的解决方案

技术等级：中级 | 适合有一定的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

本篇文章为大家讲解appearance属性的用法。

一、CSS3伪装元素：

CSS3技术使用appearance属性来实现对元素的伪装。

CSS3技术使用appearance属性来实现对元素的伪装

该属性有以下两个取值可以被浏览器兼容：

• none，去除系统默认的元素外观。

• button，将元素伪装为按钮。

首先要声明，这个属性现在只有webkit内核的浏览器和火狐浏览器支持。因此使用的时候需要为该属性添加浏览器兼容性前缀：

• -webkit-appearance

• -moz-appearance

例1：将一个超级链接伪装为按钮。

HTML文档中有如下的一个超级链接：

<a href="#">小海前端（头条号）</a>

利用下列CSS代码将其伪装为按钮：

a{

text-decoration: none; //去除超级链接下方的下划线

appearance:button; //伪装为按钮

-webkit-appearance:button; //兼容webkit内核的浏览器

-moz-appearance:button; //兼容Firefox浏览器

width:150px; height:30px; //设置宽度和高度

text-align: center; //文本水平居中对齐

line-height: 30px; //文本垂直居中对齐

}

上述代码执行后，得到的最终效果如下图所示。

例1的最终效果

例2：将一个复选框表单元素去除系统默认的外观。

HTML文档中有如下的一个复选框表单元素：

<input type=”checkbox” value=”1”> 你好

利用下列CSS代码将其默认外观取消掉：

input[type=checkbox]{

appearance:none; //去除系统默认外观

-webkit-appearance:none; //兼容webkit内核的浏览器

-moz-appearance:none; //兼容Firefox浏览器

}

上述代码执行后，复选框中原有的矩形选择外观被删除，只留下后面的文本内容，即“你好”字样。

有的小伙伴会说，这和display属性设置为none不是一样的效果吗？注意：appearance属性取值为none和display属性取值为none是完全不一样的。

• display:none，将元素隐藏，元素本身和元素所占位置均不在页面中体现，完全消失掉了。

• appearance:none，将元素伪装为没有系统默认外观的样式，并不会将元素隐藏掉。

二、实例：美化表单元素中的下拉菜单

这个实例首先将表单元素中的下拉菜单的系统默认外观去除掉，并通过其他CSS样式对其进行美化。整个实例的最终效果如下图所示。

实例的最终效果

1、在HTML中制作一个下拉菜单表单元素：

<div>

<select name="spec">

<option disabled selected>请选择您的专业</option>

<option value="1">计算机网络技术</option>

<option value="2">计算机应用</option>

<option value="3">计算机信息管理</option>

<option value="4">计算机软件工程</option>

</select>

</div>

上述代码中第一个<option></option>标记对中设置了两个属性：第一个disabled设置菜单项不可用，保证了这一项是无法选中的；第二个selected设置该菜单项默认是选中项，这样就可以让这个用户无法选中的菜单项在默认情况下展示出来。

2、利用CSS去除掉系统默认外观：

.box select{

-webkit-appearance:none;

-moz-appearance:none;

appearance:none;

}

将表单元素的下拉菜单取出系统默认外观后的效果如下图所示。

去除掉系统默认外观的下拉菜单表单元素

3、设置容器.box的CSS样式：

.box{

width:240px; height:30px;

position: relative;

}

这段代码为下拉菜单的外部容器指定了宽度和高度，由于.box并没有设置任何可见的效果（例如背景或边框），所以这段代码对整个效果的外观是没有影响的。但是这个容器会影响内部元素的一些效果，将这个容器设置为相对定位，接下来对<select>标记对设置为绝对定位，可以让.box容器内的元素在容器内进行定位。

4、设置<select>标记的CSS样式：

这主要是一些与外观有关的CSS样式设置，包括圆角效果、背景颜色、字体设置、字号大小、首行缩进、元素轮廓等样式。

.box select{

width:240px; height:30px;

border-radius: 5px;

background-color: #efefef;

font-family: Microsoft YaHei;

font-size: 16px;

text-indent: 10px;

outline:none;

}

5、为<select>标记添加右侧的下三角：

我们发现，当将下拉菜单系统默认的外观去除后，表示可以单击下拉的下三角也被删除了。这就需要我们在<box></box>标记对内部再添加一个下三角。这里需要用到content属性，该属性必须结合伪元素选择器::before或::after共同使用。

.box::after{

content:"▼";

position: absolute;

right:5px; top:5px;

pointer-events: none;

}

上述代码表示在.box的末尾（::after）添加content属性指定的文本内容，我们为该属性设置了一个下三角符号，这个符号小伙伴们可以从Word软件中输入并复制过去。

最后一行 pointer-events:none的含义是将这个下三角变为不能接收鼠标事件的状态，也就是说，单击这个下三角就好像单击它的父元素似的，这样给人的感觉就是单击下三角能够拉下来所有的菜单项。

对于不了解pointer-events属性的小伙伴，可以参考小海前端（头条号）书写的上一篇文章，即《CSS3增强用户界面属性，有关溢出、缩放、轮廓与文本选中的解决方案》一文，该文章的最后对pointer-events属性有讲解。

小海声明

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

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

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

在明天的文章中，将为大家讲解增强用户界面的content属性的使用。该属性的用法较多，正在学习CSS3技术的小伙伴们一定不要错过。