css3 background自定义select式样(仅适用于chrome)
日期：2014-05-17 浏览次数：20677 次
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);
-webkit-padding-start: 8px;
width: 170px;
height: 26px;
line-height: 24px;
background-image: url("icon.png"), -webkit-linear-gradient(top, #f7f7f7, #efefef);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
