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根本不支援。