jQuery select下拉框美化

最新推荐文章于 2023-02-24 09:53:09 发布
最新推荐文章于 2023-02-24 09:53:09 发布
阅读量1k 收藏
点赞数
分类专栏： JS和JQuery 文章标签： jquery html select 下拉框 自定义下拉框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csmzl/article/details/73087942
版权

jQuery select下拉框美化

HTML：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery select下拉框美化</title>
<meta charset="utf-8">
<script src="../../js/jquery-1.12.1.js"></script>
</head>
<body>
    <div style="width: 264px; height: 130px; left: 0px; top: 0px; position: absolute; right: 0px; bottom: 0px; margin: auto;">
        <select name="drop1" class="ui-select2" id="selectId">
            <option value="">structure empty</option>
            <option value="1">structure 1</option>
            <option value="2">structure 2</option>
            <option value="3">structure 3</option>
            <option selected value="4">structure 4</option>
            <option value="5">structure 5</option>
            <option value="6">structure 6</option>
            <option value="7">structure 7</option>
            <option value="8">structure 8</option>
            <option value="9">structure 9</option>
            <option value="10">structure 10</option>
            <option value="11">structure 11</option>
        </select>
    </div>  
</body>
</html>

CSS：

<style type="text/css">
    * {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    .slt-main{
        background-color: #FFFFFF;
        border: 1px solid #4682B4;
        box-shadow: 0 0 2px #4682B4;
        border-radius: 5px;
        font-size: 17px;
        height: 30px;
        position: relative;
        width: 200px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
    }
    .slt-arrow{
        border-top: 7px solid #4682B4;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        cursor: pointer;
        height: 0px;
        position: absolute;
        top: 12px;
        right: 10px;
        width: 0px;
        z-index: 7;
    }
    .slt-arrow.reverse {
        border-top: 7px solid transparent;
        border-bottom: 7px solid #4682B4;
        top: 4px;
    }
    .slt-set{
        background-color: #FFFFFF;
        border-radius: 5px;
        color: #4682B4;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        position: relative;
        padding: 0 35px 0 15px;
        width: 150px;
        z-index: 5;
    }
    .slt-block{
        background-color: #FFFFFF;
        border-left: 1px solid #4682B4;
        border-right: 1px solid #4682B4;
        border-bottom: 1px solid #4682B4;
        border-radius: 5px;
        box-shadow: 0 0 2px #4682B4;
        left: -1px;
        line-height: 20px;
        position: absolute;
        top: 32px;
        width: 200px;
    }
    .slt-list{
        cursor: pointer;
        margin: 15px 0 7px;
        list-style-type: none;
    }
    .slt-item{
        color: #4682B4;
        padding: 6px 15px;
    }
    li.slt-item.active{
        background-color: rgb(45, 178, 255);
        color: #FFFFFF;     
    }
    .slt-item:hover{
        background-color: rgb(45, 178, 255);
        color: #FFFFFF;
    }
    ul.slt-list::-webkit-scrollbar {
        width: 12px;
    }
    ul.slt-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
    }
</style>

JQuery:

<script type="text/javascript">
        var num = 0;    
        function creatSelect(strId,relatedFunc) {
            var objSlt = $("#" + strId);
            objSlt.css("display", "");
            var strSltDefault = '<div id="creatSlt' + num + '" class="slt-main" style="' +objSlt.attr("style") + '"><div class="slt-arrow"></div><div class="slt-set"></div><div class="slt-block" style="display: none;"><ul class="slt-list" style="height: 200px; overflow: auto;"></ul></div><div>'
            objSlt.css("display", "none");
            objSlt.after(strSltDefault);
            var objSltOptList = objSlt.find("option");
            var objCreat = $("#creatSlt" + num);
            var strLi = "";
            for(let i = 0; i < objSltOptList.length; i++) {
                var objLi = $(objSltOptList[i]);
                if(objLi.prop("selected") || objLi.attr("selected")) {
                    strLi += '<li class="slt-item active" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
                    objSlt.next("div").find(".slt-set").text(objLi.text());
                } else {
                    strLi += '<li class="slt-item" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
                }       
            }
            objSlt.next("div").find(".slt-list").append(strLi);

            $("#creatSlt" + num).bind("click", function() {
                $(".slt-block").css("display", "none");
                $(".slt-arrow").removeClass("reverse");
                if($(this).find(".slt-block").css("display") == "none") {
                    $(this).find(".slt-block").css("display", "block")
                    $(this).find(".slt-arrow").addClass("reverse");
                } else {
                    $(this).find(".slt-block").css("display", "none")
                    $(this).find(".slt-arrow").removeClass("reverse");
                }
            });
            objCreat.find(".slt-block").bind("click", function(e) {
                var src;
                if(e.target) {
                    src = $(e.target);
                } else {
                    src = $(e.srcElement);
                }
                objCreat.find(".slt-set").text(src.text());
                objCreat.find(".slt-list .active").removeClass("active");
                src.addClass("active");
                objSlt.get(0).selectedIndex = src.index();
                if(relatedFunc){
                    eval(relatedFunc+"()");
                }
            });
            num++;
        }

        $(document).bind("click",
            function(e) {
                if(!$(e.target).is(".slt-set") && !$(e.target).is(".slt-arrow") && !$(e.target).is(".slt-main")) {
                    $(".slt-block").css("display", "none")
                    $(".slt-arrow").removeClass("reverse");
                }
            }
        );

        creatSelect("selectId");
    </script>
csmzl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个解决中午吃什么去哪吃的程序
csmzl的博客
01-04 9482
一个解决中午吃什么去哪吃的程序这下不用每天都纠结吃什么了！<html> <head> <script type="text/javascript" src="jquery-1.12.1.js"></script> <style type="text/css"> #bigDiv div{ height:50
JQuery在PC端实现手机触屏垂直滑动效果
csmzl的博客
10-12 5570
JQuery实现手机触屏垂直滑动效果  经常会遇到下拉框过长出现垂直滚动条的情况，有时候这个长度还是由用户来增加的。   比如：有一个评价菜单，单击它会出现一个浮层，这个浮层列出了很多评语，这些评语都是用户自己增加的，该帐号下的所有的用户增加的评价都会显示出来。很快这个浮层的长度就超过了窗口的长度，那就会出现滚动条，然后样式就丑爆了。   浮层的宽度本身就不宽，也就滚动条宽度的3-5倍，再就是滚
jquery改变select和option样式
weixin_41813243的博客
04-21 894
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <scr...
jQuery对select和option操作小结
04-17 67
jQuery对select和option操作小结，加入移出move2010-07-01 17:05//遍历option和添加、移除optionfunction changeShipMethod(shipping){var len = $("select[@name=ISHIPTYPE] option").lengthif(shipping.value != "CA"){$("select...
JQuery select option用法
qq_20867981的博客
06-23 596
&lt;div style="float:left;"&gt; &lt;select multiple id="select1" style="width:100px;height:160px;"&gt; &lt;option value="1"&gt;选项1&lt;/option&gt; &
JQuery实现select选项变化的渐入渐出
Fuzz
07-24 224
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&g
jQuery实现select下拉框样式美化效果
05-12
内容索引:脚本资源,jQuery,Select,下拉框美化　　jQuery实现select下拉框样式美化效果，这是个挺实用的网页美化技巧，现在jquery很流行，用它不但可以实现交互的Ajax效果，同时也可用来美化表单元素，像下拉框，单选框，复选框以及文本框等，本代码就是一个美化Select的实例，希望朋友们下载一起研究。
用Jquery实现（下拉框）select元素的透明和圆角！（源码实例）
【敦厚的曹操】的专栏
09-23 7908
$(function() { $("#test").jsScroll(); }) 1 2 3 4 5 6 7 8 9 10 比较简陋只是将select转成自定义的样式 现在只有2个参数可以设置 复制代码 代码如下: $(function() { $("#test").jsScroll({
HTML下拉框样式美化
老杨头的博客
02-24 5301
在网页中，下拉框的样式最难美化，默认样式巨丑，好在现在已经有各种框架实现了下拉框的样式美化，主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换，再将对应选项及事件进行关联。最近一项目需要修改很久以前的页面，用户需求又需要美化下拉框样式，又不能引入第三方的框架，只好自己动手写了一个JS插件，实现下拉框的样式美化。
jquery的select美化
freejs
11-23 136
jquery的select美化  一个简单的css配合jq美化select 演示     XML/HTML Code &lt;div id="main"&gt;               &lt;section id="basic-usage"&gt;                   &lt;select id="basic-usage-demo"&gt;..
基于JQuery封装自定义美化的 select组件
stars的博客
09-08 417
浏览器自带的select组件样式太丑，有时候想要一款自己满意的组件，不满意样式还可以自行修改； 组件封装不是得多完美，适用才是最好的； select组件配套的CSS /* UI组件样式 */ /* select */ .stui_select {width: 100%;position: absolute;top: 0;left: 0;z-index: 10;} .stui_select h3 {line-height: 32px;} .stui_select dl{border: 1px solid #e
jQuery Select下拉框美化代码
06-10
ui-select.js下拉框美化插件是一款能增强和美化网页默认select下拉框元素的jQuery Select下拉框美化代码，并且在所有浏览器中样式显示一致。
jQuery select下拉框美化代码.zip
05-24
jQuery select下拉框美化代码基于jquery.1.10.2.min.js制作，点击下拉框，显示下拉框内容。
jquery select下拉框美化特效代码
03-20
jquery select下拉框美化代码是一款基于jQuery实现的点击展开下拉框菜单选择代码。
jQuery Select下拉框美化特效特效代码
03-20
jQuery Select下拉框美化特效是一款绿色清新风格的带有滚动条下拉框代码
js中单击和双击事件的区分
热门推荐
csmzl的博客
01-03 3万+
js中单击和双击事件的区分1. 首先要了解鼠标点击（单击或双击）时包含的事件。mousedown 事件：  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。mouseup 事件：  当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事
让电脑不被锁屏的方法
csmzl的博客
09-30 1万+
让电脑不被锁屏的方法，通过JS来控制键盘，定时按下SCROLLLOCK键，达到电脑不会被锁屏的效果。   通常公司电脑都会自动锁屏，只是时间有长短。有时候闲着了不用电脑，但是却不想让电脑锁屏。那么可以用js代码来控制键盘的按键循环按下实现不锁屏的效果，由于浏览器出于安全考虑，所以下面的代码只在ie上有效。
js jquery中的延时方法（set/clearTimeout）
csmzl的博客
01-04 7303
js jquery中的延时方法（set/clearTimeout）起因：当一个标签同时拥有单击和双击事件时，为了区分开单双击事件，在双击事件中需要对单击事件进行延时，然后再清除单击事件。故而用到了setTimeout和clearTimeout方法，其中延时的时间的确定稍有不清楚的地方，故在此进行研究讨论。
Jquery实现自定义滚动条，DIV滑动效果
csmzl的博客
10-21 5459
浏览器自带的滚动条一般都不符合我们的需求（因为不好看，太丑，还不能改！），网上搜了一下，发现有很多用js或者jquery实现的自定义的滚动条，而且样式都很漂亮。比如说这个： http://manos.malihu.gr/jquery-custom-content-scroller/ 里面有很多很多很漂亮的滚动条的example。  言归正传，既然都有了直接拿来用不就好了么！个人拿来随便用啊，但是你要
html5 下拉按钮样式修改,css和jquery实现的select美化自定义下拉框样式
最新发布
06-01
可以使用 CSS 样式和 jQuery 实现下拉按钮的美化和自定义样式，下面是一个简单的样例： HTML 代码： ```html 选择一个选项： <div class="select-wrapper"> <select id="mySelect"> 选项1 选项2 选项3 </...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值