html 物资 jQuery下拉框select美化

最新推荐文章于 2023-05-11 14:55:54 发布

技术支持151

最新推荐文章于 2023-05-11 14:55:54 发布

阅读量825

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/u010304626/article/details/51289796

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现特效：jQuery下拉框select美化，未做手机适应，引入jquery.min.js

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>jQuery下拉框select美化</title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <style>
            html { box-sizing: inherit; background-color: #8e9eab; background: linear-gradient(to left, #8e9eab, #eef2f3);}
            body { margin: 10% auto; font-size: 12px;}

            .select { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 325px; color: #cccccc; vertical-align: middle; text-align: left; user-select: none; -webkit-touch-callout: none;}
            .select .placeholder { position: relative; display: block; background-color: #393d41; z-index: 1; padding: 1em; border-radius: 2px; cursor: pointer;}
            .select .placeholder:hover { background: #34383c;}
            .select .placeholder:after { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-family: 'FontAwesome'; content: '\f078'; z-index: 10;}
            .select.is-open .placeholder:after { content: '\f077';}
            .select.is-open ul { display: block;}
            .select.select--white .placeholder { background: #fff; color: #999;}
            .select.select--white .placeholder:hover { background: #fafafa;}
            .select.select--green .placeholder { background: #5BF36E; color: #FFF;}
            .select.select--green .placeholder:hover { background: #5BF36E;}
            .select ul { display: none; position: absolute; overflow: hidden; width: 100%; background: #fff; border-radius: 2px; top: 100%; left: 0; list-style: none; margin: 5px 0 0 0; padding: 0; z-index: 100;}
            .select ul li { display: block; text-align: left; padding: 0.8em 1em 0.8em 1em; color: #999; cursor: pointer;}
            .select ul li:hover { background: #4ebbf0; color: #fff;}
        </style>
    </head>

    <body>

        <div class="select">
            <span class="placeholder">请选择</span>
            <ul>
                <li>百度</li>
                <li>谷歌</li>
                <li>雅虎</li>
                <li>新浪</li>
            </ul>
        </div>

        <br>
        <div class="select select--white">
            <span class="placeholder">sucaihuo</span>
            <ul>
                <li>代码</li>
                <li>素材</li>
                <li>模板</li>
                <li>教程</li>
            </ul>
        </div> <br>
        <div class="select select--green">
            <span class="placeholder">性别</span>
            <ul>
                <li>男</li>
                <li>女</li>
            </ul>
        </div>
        <script>
            $('.select').on('click', '.placeholder', function(e) {
                var parent = $(this).closest('.select');
                if (!parent.hasClass('is-open')) {
                    parent.addClass('is-open');
                    $('.select.is-open').not(parent).removeClass('is-open');
                } else {
                    parent.removeClass('is-open');
                }
                e.stopPropagation();
            }).on('click', 'ul>li', function() {
                var parent = $(this).closest('.select');
                parent.removeClass('is-open').find('.placeholder').text($(this).text());
            });

            $('body').on('click', function() {
                $('.select.is-open').removeClass('is-open');
            });
        </script>
</body>
</html>

效果图：

技术支持151

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html 物资 jQuery下拉框select美化

实现特效：jQuery下拉框select美化，未做手机适应，引入jquery.min.js jQuery下拉框select美化 html { box-sizing: inherit; background-color: #8e9eab; background: linear-gradient(to l
复制链接

扫一扫