css3 background自定义select样式(仅适用于chrome)

首先我们先来了解下css3中background的一些新特性:

控制背景图片的尺寸

background-size: 固定的值或百分比/cover/contain

固定的值或百分比：有两个值，一个是显示背景的width，一个是显示背景的height.只设置一个值时，则是width的值，height为auto

cover：保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域

contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域

背景图片的显示位置：

-webkit-background-origin:boder-box/padding-box/content-box

boder-box：从border部分开始显示

padding-box：从padding部分开始显示

content-box： 从显示内容的区域开始显示背景图片

注：必须设置background-repeate:no-repeat;次属性才会有效

多背景图片叠加

background-image: url("url1"),url("url2");

背景显示的层次关系是依次向下，即url1显示在最外层

背景除了写成图片的链接地址外，还可以写成背景色渐变等。

也可以写成background: url("url1"),url("url2");

现在，我们开始做一个自定义的select样式。

我们先准备一个倒三角（icon.png）的图片，作为下拉列表的箭头。

css代码如下

-webkit-appearance: none;/*去掉自带的样式*/
-webkit-padding-start: 8px;
width: 170px;
height: 26px;
line-height: 24px;
background-image: url("icon.png"), -webkit-linear-gradient(top, #f7f7f7, #efefef);
background-repeat: no-repeat;
background-position: center right;
-webkit-background-origin: content-box,border-box;
 padding-right: 12px;
border: 1px solid #878787;
border-radius: 4px;
outline: none;
cursor: pointer;
box-shadow: 0px 1px 1px rgba(0,0,0,0.21);