基于JQuery封装自定义美化的 select组件

浏览器自带的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 #eee;height: 32px;color: #666;position: relative;}
.stui_select dl .span_list {
   max-height: 240px;overflow-y: auto;text-align: left;}
.stui_select dt {
   padding-left: 13px;line-height: 32px;height: 32px;cursor: pointer;}
.stui_select dt .input {
   width: 90%;height: 32px;line-height: 32px;color: #666;border: none;overflow: hidden;text-align: left;}
.stui_select dt p.input {
   font-weight: 500;}
.stui_select dt span{
   border: 5px solid;border-right-color: transparent;border-left-color: transparent;right: 6px;}
.stui_select dt.down span {
   border-top-color: #999;border-bottom-color: transparent;top: 11px;}
.stui_select dt.up span {
   border-bottom-color: #999;border-top-color: transparent;top: 4px;}
.stui_select dd {
   width: 100%;background: #fff;border: 1px solid #eee;margin-top: 0;margin-left: -1px;position: absolute;left: 0;}
.stui_select dd.top {
   bottom: 34px;}
.stui_select dd span {
   transition: all .3s;display: block;height: 32px;line-height: 32px;padding-left: 13px;cursor: pointer;overflow: hidden;}
.stui_select dd span.st_active {
   color: #FFAE00;}
.stui_select dd span:hover {
   background: #ffae00;transition: all .3s;color: #fff!important;}
.stui_select .search {
   padding: 5px 13px;}
.stui_select .search input {
   width: 100% !important;height: 32px;line-height: 32px;padding-left: 10px;}

select 组件js

/* select */
(function($){
   
    $.fn.stSelect = function(options){
   
        //对象混入---mix---$.extend
        return this