需求:下拉選單的設計是自訂的樣式,不只背景,連右方箭號也是。使用 jQuery 的解法很多,此為其中一種。
若要連下拉出的選單樣式都要變更,可參考 jQuery UI 的版本。
解法:
http://mondaybynoon.com/2009/02/23/creating-custom-form-elements-using-jquery-selects/
- 加入 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_toggle
的background
樣式則為右方箭號圖,高度則是修改height
。span.value
是點擊下拉後出現的待選項目,.enhanced a
是已選項目的樣式。.dropdown
是框,可調整width
以變更寬度。若要調整點擊出現的選單寬度,可調整.dropdown .options
中的width
。幾個比較會調整到的項目如上。
-
加入
jQuery
與enhanced-selects.js
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/enhanced-selects.js" type="text/javascript"></script>
- 選單的 HTML
<div class="select"> <select name="area"> <option value="" selected="selected">請選地區</option> <option value="台北縣">台北縣</option> <option value="台北市">台北市</option> </select> </div>