js+css实现select的美化效果_javascript技巧

CSS：

.div-select
{
 border: solid 1px #999;
 height: 40px;
 line-height: 40px;
 cursor: default;
}

.div-select-text
{
 float: left;
 background-color: #fff;
 height: 100%;
 word-break: keep-all;
 overflow: hidden;
 cursor: default;
}

 .div-select-text > div
 {
 padding: 3px;
 line-height: 34px;
 }

.div-select-arrow
{
 background-color: #fff;
 float: right;
 width: 40px;
 height: 100%;
 color: #999;
 cursor: default;
}

 .div-select-arrow > div
 {
 border: solid 1px #999;
 margin: 2px;
 height: 34px;
 background-color: #f2f2f2;
 text-align: center;
 line-height: 34px;
 font-size: 22px;
 }

.div-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;
}

 .div-select-list .div-select-item:nth-child(2n+1)
 {
 background-color: #fff;
 }

.div-select-item
{
 height: 50px;
 line-height: 50px;
 padding-left: 3px;
 padding-right: 3px;
 background-color: #f2f2f2;
 word-break: keep-all;
 overflow: hidden;
 cursor: default;
}

.div-select-item-hover
{
 background-color: #3399ff!important;
}

.div-select-selected
{
 background-color: #3399ff !important;
}

JS：

2、如何使用：

第1步、引用CSS和JS：

第2步、给select控件加上class="div-select-target" width="200"，其中class="div-select-target"是必须的，width="200"是可选的。完整HTML代码如下：

二、滚动条美化版：

CSS：

.div-select
{
 border: solid 1px #999;
 height: 40px;
 line-height: 40px;
 cursor: default;
}

.div-select-text
{
 float: left;
 background-color: #fff;
 height: 100%;
 word-break: keep-all;
 overflow: hidden;
 cursor: default;
 font-size: 16px;
 font-family: 微软雅黑,雅黑;
}

 .div-select-text > div
 {
 padding: 3px;
 line-height: 34px;
 }

.div-select-arrow
{
 background-color: #fff;
 float: right;
 width: 40px;
 height: 100%;
 color: #999;
 cursor: default;
}

 .div-select-arrow > div
 {
 border: solid 1px #999;
 margin: 2px;
 height: 34px;
 background-color: #f2f2f2;
 text-align: center;
 line-height: 34px;
 font-size: 22px;
 }

.div-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: 微软雅黑,雅黑;
}

 .div-select-list .div-select-item:nth-child(2n+1)
 {
 background-color: #fff;
 }

.div-select-item
{
 height: 50px;
 line-height: 50px;
 padding-left: 3px;
 padding-right: 3px;
 background-color: #f2f2f2;
 word-break: keep-all;
 overflow: hidden;
 cursor: default;
}

.div-select-item-hover
{
 background-color: #3399ff!important;
}

.div-select-selected
{
 background-color: #3399ff !important;
}

.div-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;
}

.div-select-scrollbar-up
{
 border-bottom: solid 1px #fff;
 height: 39px;
 font-size: 22px;
 line-height: 39px;
 color: #999;
 background-color: #cdcdcd;
 text-align: center;
}

.div-select-scrollbar-pos
{
 height: 220px;
}

 .div-select-scrollbar-pos > div:last-child
 {
 width: 40px;
 height: 20px;
 background-color: #cdcdcd;
 }

.div-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：

效果图：