平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。
效果图如下：
HTML代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>下拉框美化</title> <link href="https://www.jb51.net/css/style.css"/> <script src="https://www.jb51.net/js/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/js/simSelect.js"></script> <script> $(function(){ //下面是调用初始化语句，class名可通用，也可以ID单独定义 $(".select-box").simSelect(); //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。 $(".slt-box01").simSelect({ //所有参数如下： maxNum: 4, //最大下拉个数(超过则显示滚动条)，默认为5 width: 250, //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。 direction: "down", //下拉方向，默认down，另一个是up disabled: false //是否禁用，默认不禁，禁的话是true }); $(".slt-box02").simSelect({ //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准 maxNum: 4, width: 250, direction: "down" }); $(".slt-box03").simSelect({ //禁用下拉框的话，有三种写法，任选。建议第二种： disabled: true, //一：这里的参数写disabled:true 二：给div加class="disabled" 三：给原生select加disabled="true" width: 250 }); $("#slt-box04").simSelect(); //ID单独定义。单个option可以禁用 }); </script> </head> <body> <!-- wrap和table非必需,用于布局而已 --> <div> <table> <tbody> <tr> <th>不带参数：</th> <td><div> <select> <option>第一个选项</option> <option>第二个选项</option> <option>第三个选项</option> <option>第四个选项</option> <option>第五个选项</option> <option>第六个选项</option> </select> </div></td> </tr> <tr> <th>初始化语句写了参数：</th> <td><div> <select> <option>第一个选项</option> <option>第二个选项</option> <option>第三个选项</option> <option>第四个选项</option> <option>第五个选项</option> <option>第六个选项</option> </select> </div></td> </tr> <tr> <th>在div上面写参数：</th> <td><div max-num="6"> <select> <option>第一个选项</option> <option>第二个选项</option> <option>第三个选项</option> <option>第四个选项</option> <option>第五个选项</option> <option>第六个选项</option> </select> </div></td> </tr> <tr> <th>禁用的样式：</th> <td><div> <select> <option>第一个选项</option> <option>第二个选项</option> <option>第三个选项</option> <option>第四个选项</option> <option>第五个选项</option> <option>第六个选项</option> </select> </div></td> </tr> <tr> <th>其中一个选项禁用：</th> <td><div max-num="4"> <select> <option>第一个选项</option> <option>第二个选项超长超长超长超长长啊</option> <option disabled="true">第三个选项</option> <option>第四个选项</option> <option>第五个选项</option> <option>第六个选项</option> </select> </div></td> </tr> </tbody> </table> </div> </body> </html>
CSS样式如下：
@charset "utf-8"; /* 简单reset */ body, ul, li { margin: 0; padding: 0; } body { font: 14px/24px Microsoft YaHei; color: #333; } ul { list-style: none; } a { color: #333; outline: none; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; text-align: left; } /* 布局样式，非必须 */ .wrap { width: 600px; margin: 100px auto 0; padding: 20px; background-color: #d3f3dd; } .wrap table th, .wrap table td { padding: 8px 2px; } .wrap table th { font-weight: normal; text-align: right; } /* 下拉框样式 必须 */ .select-style ul { list-style: none; padding: 0; margin: 0; } .select-style select { display: none; } .select-style { position: relative; display: inline-block; font-family: Microsoft YaHei; color: #666; font-size: 14px; text-align: left; vertical-align: middle; z-index: 50; } .select-style.focus { z-index: 51; } .select-style .slt-wrap { display: inline-block; width: 200px; border: solid 1px #d6d6d6; vertical-align: middle; } .select-style.focus .slt-wrap { border: solid 1px #53a8df; } .select-style .slt-title { position: relative; display: block; padding: 0 36px 0 5px; line-height: 30px; height: 30px; text-decoration: none; background-color: #fff; word-break: break-all; color: #666; overflow: hidden; } .select-style .slt-title .slt-text { display: inline-block; height: 30px; *cursor: pointer; } .select-style .slt-title i { position: absolute; right: 0; top: 0; display: inline-block; width: 30px; height: 30px; background: url(../images/ico-select.png) 0 0 no-repeat; *cursor: pointer; } .select-style.focus .slt-title i { background-position: 0 -30px; } .select-style.disabled .slt-title i { background-position: 0 -60px; *cursor: default; } .select-style .opn-box { display: none; position: absolute; left: 0; top: 31px; width: 100%; } .select-style.up .opn-box { top: auto; bottom: 31px; } .select-style .opn-box .opn-list { position: relative; _width: 100%; max-height: 130px; border: 1px solid #d6d6d6; background: #fff; overflow-y: auto; overflow-x: hidden; } .select-style.focus .opn-box .opn-list { border-color: #53a8df; } .select-style .opn-box .opn-list li { display: block; _width: 100%; padding-left: 5px; line-height: 26px; height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } .select-style .opn-box .opn-list .selected { background: #d4edfe; } .select-style .opn-box .opn-list li:hover { color: #fff; background: #65abda; } .select-style .opn-box .opn-list li.disabled { color: #cacaca; background: #f0f0f0; cursor: default; } .select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; } .select-style.disabled .slt-title { color: #cacaca; background-color: #f0f0f0; cursor: default; } .select-style.disabled .slt-title .slt-text { *cursor: default; } /* 下拉框样式 结束 */
Jquery代码如下：