日期:2014-05-17  浏览次数:20567 次

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);