关于Select标签的css样式(如果你有更好的方法请说一下)

这个问题之前是发在了论坛上了,不过没有人看,今天看了看旧贴,还是整理出来给自己在熟悉一次.关于这个问题自己之前在论坛上一直问不出结果,之后让老板给逼了出来!有时候压力也是一种动力

Select标签如果我们只写一般的样式的话,在IE下是没有效果的,但在FF下却是看到了效果,(这个时候我总是会为FF而欢呼,^_^)

select{
	width:300px;
	height:15px;
	color:#000;
	font-size:12px;
	border:1px solid #000;
}

如果仅仅是这样,我们在IE下看到的效果紧紧是宽度和字体颜色的变化,其他的就不能控制.

于是我在Select外面加入了一个div,控制它的定位,然后利用overflow:hidden属性把超出的范围切掉

#box{
	position:absolute;
	width:300px;
	height:15px;
	border:1px solid #456;
	overflow:hidden;
}
select{
	position:relative;
	top:-2px;
	left:-1px;
	width:300px;
	height:15px;
	color:#000;
	font-size:12px;
}

不过这样FF也会读取到这些,所有最后还要利用if ie在IE下读取这些

还有最后的一个问题是我到现在都还没有办法搞好的,就是那个箭头怎样都没有办法修改,看了很多资料,需要用到javascript控制,如果你有好的例子或者方法,请跟我说说,谢谢.

=======================================================

在这个样式中有些情况不是很乐观，这样的话option多余的部分也会给剪切掉了。

因此为了有些情况我会这样写：

#box{
width:100px;
overflow:hidden;
}
这样它剪切的仅仅是<div id="box"></div>部分，不会把option都给剪切掉。老实说，这东西真的好难搞得非常美观。
2006.3.26修改