回到顶部

css+js美化下拉框(兼容IE6、7、8以上主流浏览器)

时间:5年前   作者:老廖   浏览:1005   [站内原创,转载请注明出处]

标签: JavaScript   css   jQuery  

效果图:


<!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人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。