css个性下拉框和按钮

最近在做一个教育平台网站。其中有几个问题是之前没有遇到过的。
首先，input 的背景图片问题，解决这类问题的方法是：
.loginbtn
{
width:29px;
height:24px;
border:0px;/* 边框设置为0 */
background-color:Transparent;/* 背景颜色设为透明 */
background-image:url(../images/zxcs_go.png);/*换成自己的背景 */
}
第二，个性下拉框。解决方法：
首先需要2个图片，一个是背景框，另一个是箭头。
HTML代码如下：
<span id="sleBG">
<span id="sleHid">
<select name="select" size="1" id="select" class="xialaliebiao">
<option value="张三">张三</option>
<option value="李四">李四</option>
</select>
</span>
</span>
CSS代码如下：
.xialaliebiao
{
width:160px;
height:21px;
background:none;
border:none;
padding-top:3px;
background-color:Transparent;
}
#sleHid
{
display:block;
width:134px;
height:18px;
overflow:hidden;
position:relative; /*解决IE6、7兼容问题*/
top:2px; /*解决IE6、7兼容问题*/
left:2px; /*解决IE6、7兼容问题*/

}
#sleBG
{
width:160px;
height:24px;
background:url(../images/ddl_bg1.png) no-repeat;
display:inline-block;
height:24px;
position:relative;
}
解释一下：
原理是在select外层加入2个span，首先设置第一个span，其width大于select的width，在这个span的背景加入我们想要的下拉箭头样式，然后再加第二个span，其width小于select的width，关键设置好它的overflow的宽度，隐藏select的下拉箭头。
优点是设置简单，缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。
想要求漂亮而且代码的少的话，可以使用本方法。
注释：
当我们使用overflow:hidden;后，你会发现，这个属性只在FF和IE8下起作用，那么在IE6、7下怎么办？很简单，加一个position:relative;即可。然后根据你需要的位置，加一个top、left，问题完美解决。

第三，滚动条问题。
CSS自定义滚动条：
scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

大概就这些，你也可以定义cursor:hand;来定义滚动条的鼠标手势。顺便填一句，FF不支持cursor:hand;标准的写法是 cursor:pointer;
但是，需要强调的是，这些只适用于IE浏览器下，FF根本不支持。