平时我们在做下拉框时，一般是在浏览器自带的下拉框样式上做调整。但有时，自带的下拉框无法满足我们对页面设计美观的要求。今天要再来分享一款基于纯CSS3的自定义下拉select表单。

html代码如下：

2.      中央部门政府    外交部    教育部    国防部    交通运输部    人口计生委    国土资源部  

css代码如下：

1. .select {
2.  display: inline-block;
3.  position: relative;
4.  vertical-align: middle;
5.  overflow: hidden;
6.  background: #fff;
7.  border: 1px solid #aaa;
8.  text-shadow: none;
9.  -moz-border-radius: 4px;
10.  -webkit-border-radius: 4px;
11.  border-radius: 4px;
12.  -moz-transition: box-shadow 0.25s ease;
13.  -o-transition: box-shadow 0.25s ease;
14.  -webkit-transition: box-shadow 0.25s ease;
15.  transition: box-shadow 0.25s ease;
16. }
17.  
18. .select:hover
19. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
20. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
21. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
22. }
23.  
24. .select:before {
25. position: absolute;
26. top: 0.3em;
27. right: 0.5em;
28. pointer-events: none;
29. }
30.  
31. .select select {
32. cursor: pointer;
33. padding: 0.5em;
34.  padding-right: 2em;
35. width: 130%;
36. border: none;
37. background: transparent;
38. background-image: none;
39. -webkit-appearance: none;
40. -moz-appearance: none;
41. appearance: none;
42. text-indent: 0.01px;
43. color: #666;
44. font-family: "微软雅黑";
45. }
46.  
47. .select select:focus {
48.  outline: none;
49. }
50.  
51. select:before {
52.  font-family: "icons";
53.  font-style: normal;
54. font-weight: normal;
55. font-variant: normal;
56. }
57.  
58. .icon--down:before, .select:before {
59.   content: "e600";
60. }
61.  
62. @font-face {
63. font-family: 'icons';
64. src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARgAAoAAAAABBgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAANgAAADYZbVvCE9TLzIAAAHMAAAAYAAAAGAIIvy2Y21hcAAAAiwAAABMAAAATBpVzFdnYXNwAAACeAAAAAgAAAAIAAAAEGhlYWQAAAKAAAAANgAAADYAl8viaGhlYQAAArgAAAAkAAAAJANuAeZobXR4AAAC3AAAABQAAAAUAwAAdG1heHAAAALwAAAABgAAAAYABVAAbmFtZQAAAvgAAAFFAAABRVcZpu5wb3N0AAAEQAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB2Dx0AAAB7ER0AAAAJHQAAAM8SAAYBAQgPERMWG2ljb21vb25pY29tb29udTB1MXUyMHVFNjAwAAACAYkAAwAFAQEEBwoNTPyUDvyUDvyUDvuUDvgg958VgYD7AiOLi4aFg4iEi4SLg46GkYuL+wLzgZaAloqel5eWlpqMmX8I7yvv6wWZl5qKloCXf4p4gIAIDviUFPiUFYsMCgADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYAAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5gD//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAss1nQF8PPPUACwIAAAAAAM/2xdgAAAAAz/bF2AAAAAABjAE1AAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAGMAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAHQAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKADQAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKADQAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff");
65. font-weight: normal;
66. font-style: normal;
67. }

　　其中下拉小箭头是用的@font-face 实现的。@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。在@font-face网络字体技术之前，浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。