基于jquery实现下拉框美化特效_jquery

@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; }
/* 下拉框样式 结束 */