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

需求圖：

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

 

1. 加入 CSS 樣式

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/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; }
</style>

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

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

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

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

02. 加入 jQuery 與 enhanced-selects.js

1
2
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/enhanced-selects.js" type="text/javascript"></script>

03. 選單的 HTML

1
2
3
4
5
6
7
<div class="select">
    <select name="area">
        <option value="" selected="selected">請選地區</option>
        <option value="台北縣">台北縣</option>
        <option value="台北市">台北市</option>
    </select>
</div>

完成的效果：

arrow
arrow
    文章標籤
    [jQuery] 自訂 select 選單樣式 [jQuery] 自訂 select 選單 select 選單樣式
    全站熱搜
    創作者介紹
    創作者 英國旅遊民宿推薦 的頭像
    英國旅遊民宿推薦

    英國旅遊-英國民宿, 倫敦遊記, 英國海外婚紗

    英國旅遊民宿推薦 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄