css+js美化下拉框（相容IE6、7、8以上主流瀏覽器）
效果圖：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css+js美化下拉框（相容IE6、7、8以上主流瀏覽器）</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js"></script>
<style type="text/css">
.easyui_combobox {
width: 300px;
height: 25px;
line-height: 25px;
position: relative;
border: 1px solid #ccc;
display: inline-block;
*display: inline;
*zoom: 1;
z-index: 1;
border-radius: 3px;
}
.easyui_combobox span {
font-size: 13px;
font-family: '微軟雅黑';
padding-left: 5px;
}
.easyui_combobox i {
width: 25px;
height: 100%;
position: absolute;
display: inline-block;
*display: inline;
*zoom: 1;
top: 0;
right: 0;
border-left: 1px solid #ccc;
background: #f4f4f4 url(http://vanfun.com/_images/rent_drop_arrow2.png) no-repeat center; /*這裡你自己換成簡頭背景*/
}
.easyui_combobox div.list {
width: 100%;
line-height: 25px;
max-height: 250px; /* 25的高 乘 10行 */
overflow-x: auto;
position: absolute;
z-index: 10;
left: -1px;
top: 26px;
border: 1px solid #ccc;
border-top: 0;
background: #fff;
display: none;
_height: 250px;
*overflow-x: hidden;
}
.easyui_combobox div.list a {
height: 25px;
width: 100%;
display: block;
overflow: hidden;
text-decoration: none;
color: #000;
font-size: 13px;
font-family: '微軟雅黑';
text-indent: 5px;
}
.easyui_combobox div.list a:hover {
background: #008b8b;
color: #fff;
}
</style>
</head>
<body>
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
<br /><br />
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
<div class="easyui_combobox">
<span>請選擇城市</span>
<i></i>
<input type="hidden" name="city" value="" />
<div class="list">
<a href="#" data-value="">請選擇城市</a>
<a href="#" data-value="1">測試內容1</a>
<a href="#" data-value="2">測試內容2</a>
<a href="#" data-value="3">測試內容3</a>
<a href="#" data-value="4">測試內容4</a>
<a href="#" data-value="5">測試內容5</a>
<a href="#" data-value="6">測試內容6</a>
<a href="#" data-value="7">測試內容7</a>
<a href="#" data-value="8">測試內容8</a>
<a href="#" data-value="9">測試內容9</a>
<a href="#" data-value="10">測試內容10</a>
<a href="#" data-value="11">測試內容11</a>
<a href="#" data-value="12">測試內容12</a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
/*通用程式碼（裡面的程式碼如果沒BUG或者特殊需求最好不要動）*/
$(document).on({
mouseover: function () {
$(this).css('z-index', 2);
$(this).children('.list').show();
},
mouseout: function () {
$(this).css('z-index', 1);
$(this).children('.list').hide();
}
}, '.easyui_combobox');
$(document).on('click', '.easyui_combobox a', function () {
var $parent = $(this).parents('.easyui_combobox');
$parent.find('input').val($(this).attr('data-value'));
$parent.find('span').text($.trim($(this).text()));
$(this).parent().hide();
return false;
});
/*通用程式碼*/
});
</script>
由龐順龍最後編輯於：4年前
內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。
相關文章
- js上傳圖片預覽，相容IE6以上各大主流瀏覽器JS瀏覽器
- 瀏覽器相容IE6、IE7、IE8、Firefox、OperaCSShack區分瀏覽器FirefoxCSS
- 對 IE6 ~ IE8 老瀏覽器相容的 intern-geezer瀏覽器
- 建立相容IE6瀏覽器的ajax請求物件瀏覽器物件
- jquery1.9以上版本判斷瀏覽器是否為IE6jQuery瀏覽器
- 前端檔案下載相容方案（相容主流瀏覽器，包括IE與Safari）前端瀏覽器
- 主流瀏覽器相容性問題與解決方案瀏覽器
- IE瀏覽器相容瀏覽器
- parseInt()瀏覽器相容瀏覽器
- 9：瀏覽器相容瀏覽器
- 主流瀏覽器及其核心瀏覽器
- 相容IE8和IE7瀏覽器的圓形圖案瀏覽器
- 相容IE6瀏覽器的最大高度和最小高度css程式碼瀏覽器CSS
- Bsie：讓 Bootsrap 相容 IE6-8 瀏覽器boot瀏覽器
- js相容所有主流瀏覽器建立XMLhttpRequest物件例項程式碼JS瀏覽器XMLHTTP物件
- 關於瀏覽器相容瀏覽器
- 瀏覽器相容性瀏覽器
- CSShack瀏覽器相容一覽表CSS瀏覽器
- 主流瀏覽器核心及JS引擎瀏覽器JS
- forEach()相容所有瀏覽器瀏覽器
- CSS瀏覽器相容彙總CSS瀏覽器
- Web前端瀏覽器相容初探Web前端瀏覽器
- js判斷IE6至IE8瀏覽器程式碼例項JS瀏覽器
- js實現重寫new Date()相容IE6以上JS
- edge瀏覽器相容性設定在哪 新版edge瀏覽器相容模式怎麼弄瀏覽器模式
- 瀏覽器相容以及PostCSS詳解瀏覽器CSS
- CSS瀏覽器相容問題集CSS瀏覽器
- Canvas元素實現文字的監聽輸入和主流瀏覽器的相容bugCanvas瀏覽器
- 火狐瀏覽器相容模式怎麼設定在哪裡 火狐瀏覽器相容模式設定方法瀏覽器模式
- ie瀏覽器相容模式怎麼設定在哪裡 ie瀏覽器相容模式設定方法瀏覽器模式
- 谷歌瀏覽器相容模式怎麼設定 chrome瀏覽器相容模式切換方法介紹谷歌瀏覽器模式Chrome
- 新版edge瀏覽器相容模式怎麼設定 edge瀏覽器相容性設定在哪裡瀏覽器模式
- 前端面試-主流瀏覽器以及其核心前端面試瀏覽器
- IE6 瀏覽器市場份額縮水至5%以下 IE8 或成下一個IE6瀏覽器
- （16）CSS 擴充：① 瀏覽器相容 | CSSCSS瀏覽器
- element ui 相容低版本瀏覽器UI瀏覽器
- 導航的瀏覽器相容問題瀏覽器
- 相容所有瀏覽器的placeholder效果瀏覽器