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>
由請喊我大龍哥最後編輯於：3年前
內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。
相關文章
- js上傳圖片預覽，相容IE6以上各大主流瀏覽器JS瀏覽器
- jquery1.9以上版本判斷瀏覽器是否為IE6jQuery瀏覽器
- 前端檔案下載相容方案（相容主流瀏覽器，包括IE與Safari）前端瀏覽器
- 主流瀏覽器相容性問題與解決方案瀏覽器
- IE瀏覽器相容瀏覽器
- 9：瀏覽器相容瀏覽器
- 主流瀏覽器及其核心瀏覽器
- 關於瀏覽器相容瀏覽器
- forEach()相容所有瀏覽器瀏覽器
- 瀏覽器相容性瀏覽器
- js實現重寫new Date()相容IE6以上JS
- 主流瀏覽器核心及JS引擎瀏覽器JS
- edge瀏覽器相容性設定在哪 新版edge瀏覽器相容模式怎麼弄瀏覽器模式
- 瀏覽器相容以及PostCSS詳解瀏覽器CSS
- 谷歌瀏覽器相容模式怎麼設定 chrome瀏覽器相容模式切換方法介紹谷歌瀏覽器模式Chrome
- 火狐瀏覽器相容模式怎麼設定在哪裡 火狐瀏覽器相容模式設定方法瀏覽器模式
- ie瀏覽器相容模式怎麼設定在哪裡 ie瀏覽器相容模式設定方法瀏覽器模式
- win10瀏覽器怎麼設定相容模式_win10瀏覽器相容模式如何新增Win10瀏覽器模式
- 新版edge瀏覽器相容模式怎麼設定 edge瀏覽器相容性設定在哪裡瀏覽器模式
- 相容所有瀏覽器array物件indexOf()方法瀏覽器物件Index
- （16）CSS 擴充：① 瀏覽器相容 | CSSCSS瀏覽器
- element ui 相容低版本瀏覽器UI瀏覽器
- 導航的瀏覽器相容問題瀏覽器
- 前端面試-主流瀏覽器以及其核心前端面試瀏覽器
- 360極速瀏覽器相容模式怎麼設定 360極速瀏覽器相容模式設定方法瀏覽器模式
- edge瀏覽器找不到相容性檢視設定 新版edge瀏覽器相容模式怎麼設定瀏覽器模式
- 360瀏覽器相容模式怎麼設定 360極速瀏覽器極速相容模式怎麼切換瀏覽器模式
- [BUG反饋]IE瀏覽器，百度瀏覽器，搜狗瀏覽器批量操作功能都不相容！！！！傲遊、火狐、谷歌瀏覽器可以瀏覽器谷歌
- html5多終端瀏覽器相容HTML瀏覽器
- 滑鼠右鍵相容MAC版火狐瀏覽器Mac瀏覽器
- 瀏覽器相容問題處理總結瀏覽器
- 當前主流瀏覽器核心有哪幾個瀏覽器
- 手機瀏覽器通過Scheme跳轉APP，相容各種手機瀏覽器瀏覽器SchemeAPP
- win10瀏覽器相容性怎麼設定_win10瀏覽器相容性設定方法Win10瀏覽器
- 瀏覽器極速模式和相容模式差異瀏覽器模式
- 關於UC瀏覽器相容scroll事件問題瀏覽器事件
- 最強悍LoadRunner和瀏覽器相容完美攻略瀏覽器
- 幾款瀏覽器相容性測試工具瀏覽器