下面介紹自訂下拉式清單的兩種方法：
方法一：
用純CSS自訂下拉式清單的樣式。
原理：將預設的下拉式清單樣式清除，自訂樣式，並附上一張向靠右對齊的小箭頭圖片。
<!doctype html><html><head><style type="text/css">select{width:200px;height:30px;appearance:none; -moz-appearance:none; -webkit-appearance:none;background: url("images/select.png") no-repeat right center;font-size:16px;font-family:Microsoft YaHei;color:red;}</style></head><body><form action="" method="post"><select><option value="請選擇">請選擇</option><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option></select></form></body></html>
問題：修改option的寬和高無效。
方法二：
用p+ul+jQuery實現自訂樣式的下拉式清單select。
HTML代碼：
<p id="container"><form action="" method="post"><p><ul><li class="active">請選擇</li><li>北京</li><li>上海</li><li>廣州</li></ul></p></form></p>
CSS代碼：
#container{background:grey;width:300px;height:200px;padding:20px;}form p{ width:236px; height:34px;}form p{font-family:Microsoft YaHei; background:#FFFFFF;}form p:hover{ border:1px solid #E74F4D;}form ul{margin:0;padding:0;}form ul li:first-child{ height:34px; line-height:34px;}form ul li{ width:236px; height:24px; line-height:24px; font-size:15px; color:#323333; opacity:0.7; background:#e3e3e5; text-indent:12px;display:none;}form ul li.active{ display:block; background:url("images/arrows_active_down.gif") no-repeat scroll right center; opacity:1;}form ul li:not(.active):hover{ background:#E74F4D; color:white;}
jQuery代碼：
$(document).ready(function(){ var p = $("form").find("p"); p.mouseover(function(e) { var event = e || window.event; var target = event.target || event.srcElement; var _this = $(this); if(target.nodeName.toLowerCase() == 'li') { _this.find('li').css('display', 'block'); _this.find('li').click(function(){ var li = $(this); _this.find('.active').text(li.text()); }); } _this.mouseout(function(e) { var event = e || window.event; var target = event.target || event.srcElement; if(target.nodeName.toLowerCase() == 'li')_this.find('li').not('.active').css('display','none'); }); });});Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
