css3 background自定义select样式(仅适用于chrome)首先我们先来了解下css3中background的一些新特性:控制
css3 background自定义select样式(仅适用于chrome)
首先我们先来了解下css3中background的一些新特性:控制背景图片的尺寸background-size: 固定的值或百分比/cover/contain固定的值或百分比：有两个值，一个是显示背景的width，一个是显示背景的height.只设置一个值时，则是width的值，height为autocover：保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域
背景图片的显示位置：-webkit-background-origin:boder-box/padding-box/content-boxboder-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);
