select美化效果-html代码-BFW代码库

select美化效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            $('.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>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>

        html {
            box-sizing: inherit;
            background-color: #8e9eab;
            background: linear-gradient(toleft, #8e9eab, #eef2f3);
        }
        body {
            margin: 20% auto;
            font-size: 12px;
        }
        .select {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 100%;
            max-width: 225px;
            color: #cccccc;
            vertical-align: middle;
            tex.........完整代码请登录后点击上方下载按钮下载查看

select美化效果

网友评论0

div+css实现全屏注册登录一体翻转表单页面代码

js+css实现分体式自聚焦验证码输入框代码

js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码

js+css实现数字验证码分体式输入框代码

open-props实现简洁登录表单效果代码

css实现代办事项列表勾选划掉打钩横线动画效果代码

css实现炫酷聚焦placeholder上浮输入框动画效果代码

div+css实现大气科技风格边框光线流动登录注册表单代码

div+css实现创意单选按钮打钩打叉动画效果代码

js+css+svg实现实时显示个性签名字体效果的输入框代码