[jQuery] 自訂 select 選單樣式

Standard

需求:下拉選單的設計是自訂的樣式,不只背景,連右方箭號也是。使用 jQuery 的解法很多,此為其中一種。
若要連下拉出的選單樣式都要變更,可參考 jQuery UI 的版本。

需求圖:

解法:
http://mondaybynoon.com/2009/02/23/creating-custom-form-elements-using-jquery-selects/

  1. 加入 CSS 樣式
    .hidden {
      display: none !important;
    }
    
    span.value {
      font-size: 16px;
    }
    
    .enhanced a {
      font-size: 16px;
      text-decoration: none;
      color: #7e7e7e;
    }
    
    .dropdown {
      float: left;
      width: 138px;
      position: relative;
    }
    
    .dropdown .options {
      position: absolute;
      left: 0px;
      top: 32px;
      overflow: auto;
      background: #fff;
      width: 120px;
      height: 55px;
      border: 1px solid #c8c8c8;
      border-top: 0;
      padding: 7px 10px;
    }
    
    .dropdown .options ul {
      list-style: none;
      margin-left: -30px;
    }
    
    .dropdown .options a {
      display: block;
      font-size: 12px;
      padding: 2px 0;
    }
    
    .dropdown .options a:hover {
      text-decoration: underline;
    }
    
    a.dropdown_toggle {
      display: block;
      height: 32px;
      background: url(images/search_select_input_btn.png) top right no-repeat;
      padding-right: 25px;
    }
    
    a.dropdown_toggle span {
      display: block;
      background: url(images/search_select_input_bg.png) no-repeat;
      padding: 7px 0 0 8px;
      height: 32px;
      cursor: pointer !important;
    }
    

    說明:
    其中 a.dropdown_toggle span 裡面的 background 樣式為左方內容區背景,a.dropdown_togglebackground 樣式則為右方箭號圖,高度則是修改 height

    span.value 是點擊下拉後出現的待選項目,.enhanced a 是已選項目的樣式。

    .dropdown 是框,可調整 width 以變更寬度。若要調整點擊出現的選單寬度,可調整 .dropdown .options 中的 width

    幾個比較會調整到的項目如上。

  2. 加入 jQueryenhanced-selects.js

    <script src="js/jquery.js" type="text/javascript"></script> 
    <script src="js/enhanced-selects.js" type="text/javascript"></script>
    
  3. 選單的 HTML
    <div class="select"> 
      <select name="area"> 
        <option value="" selected="selected">請選地區</option> 
        <option value="台北縣">台北縣</option> 
        <option value="台北市">台北市</option> 
      </select> 
    </div> 
    

完成的效果:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *