使用原生css效果，實現一個網站主頁常見的下拉選單效果：

1、HTML頁面佈局

html實現如下：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

2、CSS樣式效果

加入CSS樣式

需要注意的幾點：

1、border：solid 5px #FFF；這是一個白色的5畫素的邊框，因為網頁背景色預設是白色，這就會使select這個元素看上去好像比外面的form元素小。

2、appearance屬性 使 div 元素看上去像一個按鈕，預設是normal，設定成none就會不顯示出預設小箭頭。其中-moz和-webkit分別給火狐和谷歌瀏覽器單獨下命令。

3、用來顯示出大白色箭頭的arrow.png自己在Photoshop裡畫一個就可以了，要注意的是IE6更早的不支援png24 。

（↓↓↓下圖因為是白色箭頭圖所以看不見了）

↑↑↑這裡真的有個圖，嗯。。

下面是CSS部分：

  <style><span style="white-space:pre">	</span>form{background:#FE4C40;}
  select{

  border: solid 5px #FFF;

   appearance:none;
  -moz-appearance:none;    /*for firefox*/     
  -webkit-appearance:none;    /*for chrome*/
  
  padding-right: 10px;
  color:#FFF;
  font-size: 30px;
  
    width: 200px;
   height: 50px;
   overflow: hidden;
   background: url(arrow.png) no-repeat right #FF9900;
  }
  option{ color:#FFF;}

</style>
 

3、最終效果圖