替換預設select下拉選單箭頭程式碼例項

admin發表於2017-12-04

<select>下拉選單是最為常用的表單元素之一，但是它沒人的下拉箭頭美觀度確實有點影響美觀，所以很多網站都不用預設的<select>控制元件，而是模擬實現，具體可以參閱模擬實現select下拉選單效果一章節，這裡就不多介紹了，這裡提供一種用純CSS實現的比較簡單的方式，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.select{
  width:148px;
  height:16px;
  background:none;
  border:none;
}
#sleHid{
  display:block;
  width:123px;
  overflow:hidden;
}
#sleBG{
  width:148px;
  height:16px;
  border: 1px solid #A3938C;
  background:url(mytest/jQuery/jiantou.png) #fff no-repeat 131px 0px;
  display:block;
}
</style>
</head>
<body>
<div>
  <span id="sleBG"> 
    <span id="sleHid">
      <select name="type" class="select">
        <option selected="selected">--選擇分類--</option>
        <option value="1">javascript專區</option>
        <option value="2">搜尋優化</option>
      </select>
    </span> 
  </span>
</div>
</body>
</html>

可以將select下拉選單預設的箭頭給替換掉，下面介紹一下它的實現原理。

實現原理:

基本原理是這樣的，首先將select下拉選單放在一個span元素中，結構如下:

[HTML] 純文字檢視 複製程式碼
<span id="sleHid">
  <select name="type" class="select">
    <option selected="selected">--選擇分類--</option>
    <option value="1">javascript專區</option>
    <option value="2">搜尋優化</option>
  </select>
</span>

然後設定span（要使用display:block轉換為塊級元素，否則無法設定尺寸）的元素的尺寸要小於select下拉選單，並且採用overflow:hidden，select下拉選單超出的部分就會被隱藏，恰好select下拉選單箭頭部分就會被隱藏了，然後在sleHid元素的外部再套一個span元素sleBG，此元素的尺寸要超出sleHid元素，然後將箭頭設定為此元素的右對齊的背景圖片，於是就實現了替換功能。

相關文章