HTML的select控件美化功能

CSS：

.p-select border: solid 1px #999; height: 40px; line-height: 40px; cursor: default;.p-select-text float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; .p-select-text p padding: 3px; line-height: 34px;.p-select-arrow background-color: #fff; float: right; width: 40px; height: 100%; color: #999; cursor: default; .p-select-arrow p border: solid 1px #999; margin: 2px; height: 34px; background-color: #f2f2f2; text-align: center; line-height: 34px; font-size: 22px;.p-select-list position: absolute; float: left; top: 100px; left: 100px; border: solid 1px #999; max-height: 300px; overflow: auto; background-color: #9f9; display: none; z-index: 9100; .p-select-list .p-select-item:nth-child(2n+1) background-color: #fff;.p-select-item height: 50px; line-height: 50px; padding-left: 3px; padding-right: 3px; background-color: #f2f2f2; word-break: keep-all; overflow: hidden; cursor: default;.p-select-item-hover background-color: #3399ff!important;.p-select-selected background-color: #3399ff !important;}

JS：

//2015年2月8日//select美化var pSelectListIndex = 0;$(function () { initpSelect();//初始化select美化插件function initpSelect() { $( .p-select-target ).each(function () { pSelectListIndex++; var select = $(this); if (select.css( display ) == none ) { return; else { select.css( display , none ) if (select.next( p ).find( .p-select-list ).length == 0) { select.after( p p >
如何使用：
第1步、引用CSS和JS：
 link type= text/css href= ~/scripts/pSelect/pSelect.css rel= external nofollow rel= external nofollow rel= stylesheet /  script type= text/javascript src= ~/scripts/html' target='_blank'>jquery-1.7.1.min.js /script  script type= text/javascript src= ~/scripts/pSelect/pSelect.js /script 
第2步、给select控件加上 >
 link type= text/css href= ~/scripts/pSelect/pSelect.css rel= external nofollow rel= external nofollow rel= stylesheet /  script type= text/javascript src= ~/scripts/jquery-1.7.1.min.js /script  script type= text/javascript src= ~/scripts/pSelect/pSelect.js /script  p >
效果图：
滚动条美化版：
CSS：
.p-select border: solid 1px #999; height: 40px; line-height: 40px; cursor: default;.p-select-text float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; font-size: 16px; font-family: 微软雅黑,雅黑; .p-select-text p padding: 3px; line-height: 34px;.p-select-arrow background-color: #fff; float: right; width: 40px; height: 100%; color: #999; cursor: default; .p-select-arrow p border: solid 1px #999; margin: 2px; height: 34px; background-color: #f2f2f2; text-align: center; line-height: 34px; font-size: 22px;.p-select-list position: absolute; float: left; top: 100px; left: 100px; border: solid 1px #999; max-height: 300px; overflow: hidden; background-color: #9f9; display: none; z-index: 9100; font-size: 16px; font-family: 微软雅黑,雅黑; .p-select-list .p-select-item:nth-child(2n+1) background-color: #fff;.p-select-item height: 50px; line-height: 50px; padding-left: 3px; padding-right: 3px; background-color: #f2f2f2; word-break: keep-all; overflow: hidden; cursor: default;.p-select-item-hover background-color: #3399ff!important;.p-select-selected background-color: #3399ff !important;.p-select-list-scrollbar position: absolute; float: left; border: solid 1px #999; border-left: 0; background-color: #e8e8ec; width: 40px; height: 300px; display: none; cursor: default; z-index: 9101;.p-select-scrollbar-up border-bottom: solid 1px #fff; height: 39px; font-size: 22px; line-height: 39px; color: #999; background-color: #cdcdcd; text-align: center;.p-select-scrollbar-pos height: 220px; .p-select-scrollbar-pos p:last-child width: 40px; height: 20px; background-color: #cdcdcd;.p-select-scrollbar-down border-top: solid 1px #fff; height: 39px; font-size: 22px; line-height: 39px; color: #999; background-color: #cdcdcd; text-align: center;}
JS：
//2015年2月8日//select美化var pSelectListIndex = 0;$(function () { initpSelect();//初始化select美化插件function initpSelect() { $( .p-select-target ).each(function () { pSelectListIndex++; var select = $(this); if (select.css( display ) == none ) { return; else { select.css( display , none ) if (select.next( p ).find( .p-select-list ).length == 0) { select.after( p p >
效果图：
以上就是HTML的select控件美化功能的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。