创建一个自定义样式的select（1）

在某些时候，我们需要为一些网站或应用创建一些外观风络一致组件，如select元素

首先我们构建css部分，思路是在select外层套入两个span构成滑动门结构，然后隐藏掉select元素（不能直接display:none，否则两个span元素不能被撑大，你只能得到一个小小的圆框框），以下为css结构

.selectOut{
	cursor:pointer;
	display:inline-block !important;
	_display:inline !important;
	zoom:1;
	height:24px;
	margin-left:3px;
	background:url(images/elem/selRight.gif) right 0 no-repeat}
.selectOut .selectIn{
	height:24px;
	position:relative;
	*position:inherit;
	_position:static;
	_width:0;
	overflow:visible;
	margin-left:-2px;
	display:inline-block;
	background:url(images/elem/selLeft.gif) 0 0 no-repeat;
	line-height:22px;
	color:#111111;
	text-align:left;}
	.selectOut .selectIn select{
		display:inline-block;
		_display:inline;
		height:24px;
        font-family:Arial;
        padding-right:10px;
		visibility:hidden;
		font-family:Arial;}
	.selectOut .selectIn select.noShow{
		display:none;
	}

.selectUlList{
	display:none;
	position:absolute;
	border:1px solid #6cc;
	overflow-x:hidde;
	overflow-y:scroll;
	background-color:#F7F7F7;
	color:#87946A;
	height:140px;
	padding:2px;
}
.selectUlList ul{
	text-align:left;
	list-style:none;
	padding:0;
	margin:0;}
	.selectUlList ul li{
		padding-left:2px;
		cursor:pointer;
		height:20px;
		line-height:20px;
	}
	.selectUlList ul li.active{
		background-color:#CEF2F2;
		color:#033;}

现在select元素的HTML结构如下：

外层的selectOut构成了右边的圆角框，内层的selectIn构成了左边的圆角框，框的大小会随着select自身的长度带动缩放，外观上接近完美啦。

附两个背景图片下载(直接点击下面两个图片)

注意，此时select中的字符内容还没显示出来，我们将在第二节中为其完其需要的js，并使其能正常运作。