HTML的select控件美化

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：

//2015年2月8日
//select美化
var divselectlistindex = 0;
$(function () {
  initdivselect();
});
//初始化select美化插件
function initdivselect() {
  $(".div-select-target").each(function () {
    divselectlistindex++;
    var select = $(this);
    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }
    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divselectlistindex + '"></div>');
    }
    var div = select.next("div");
    var divtext = div.find(".div-select-text");
    var divselect = div.find(".div-select");
    var divarrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divselectlistindex);
    function updatetext(item) {
      divtext.find("div").html(item.html());
    }
    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeclass("div-select-selected");
        item.addclass("div-select-selected");
        updatetext(item);
        list.hide();
      });
      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedmark = list.find(".div-select-selected");
        selectedmark.removeclass("div-select-selected");
        selectedmark.addclass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeclass("div-select-item-hover");
        item.addclass("div-select-item-hover");
        updatetext(item);
      });
    });
    list.mouseleave(function () {
      var selectedmark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedmark.addclass("div-select-selected");
        updatetext(selectedmark);
      }
      selectedmark.removeclass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeclass("div-select-item-hover");
    });
    if (select.attr("width")) {
      divselect.width(select.attr("width") - 2);
      divtext.width(divselect.width() - divarrow.width());
      if (select.attr("width") > list.width()) {
        list.width(divselect.width());
      }
    }
    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeclass("div-select-selected-mark");
      list.find(".div-select-item-hover").addclass("div-select-selected");
      list.find(".div-select-item-hover").removeclass("div-select-item-hover");
      if (e.keycode == 40) {
        var currentselected = list.find(".div-select-selected");
        var nextselected = currentselected.next(".div-select-item");
        if (nextselected.length == 0) {
          nextselected = list.find(".div-select-item:first");
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          list.scrolltop(0);
        } else {
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          var i = 0;
          while (nextselected.position().top < 0
            || nextselected.position().top > list.height() - nextselected.height()) {
            list.scrolltop(list.scrolltop() + nextselected.height());
            if (i++ > 100) break;
          }
        }
        updatetext(nextselected);
        return false;
      }
      if (e.keycode == 38) {
        var currentselected = list.find(".div-select-selected");
        var nextselected = currentselected.prev(".div-select-item");
        if (nextselected.length == 0) {
          nextselected = list.find(".div-select-item:last");
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          list.scrolltop(list.find(".div-select-item").length * nextselected.height());
        }
        else {
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          var i = 0;
          while (nextselected.position().top < 0
            || nextselected.position().top > list.height() - nextselected.height()) {
            list.scrolltop(list.scrolltop() - nextselected.height());
            if (i++ > 100) break;
          }
        }
        updatetext(nextselected);
        return false;
      }
      if (e.keycode == 13) {
        var selecteditem = list.find(".div-select-selected");
        var value = selecteditem.attr("value");
        select.val(value);
        list.hide();
        select.change();
      }
    });
    divselect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
      });
      if (list.css("display") == "none") {
        list.show();
      }
      else {
        list.hide();
      }
      list.css("top", divselect.offset().top + divselect.height() + 1);
      list.css("left", divselect.offset().left);
      if ($(window).scrolltop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrolltop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divselect.width()) {
        list.width(divselect.width());
      }
      var currentselected = list.find(".div-select-selected");
      if (currentselected.position().top > list.height() - currentselected.height()) {
        list.scrolltop(currentselected.position().top - currentselected.height() * 2);
      }
      return false;
    });
    $("html,body").bind("click", function () {
      list.hide();
    });
    list.click(function () {
      return false;
    });
    function initselect() {
      list.find(".div-select-selected").removeclass("div-select-selected");
      var matchitem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchitem.length > 0) {
        matchitem.addclass("div-select-selected");
        updatetext(matchitem);
      }
    }
    initselect();
    select.change(function () {
      initselect();
    });
  }); // $(".div-select-target").each
}

如何使用：

第1步、引用css和js：

<link type="text/css" href="~/scripts/divselect/divselect.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/divselect/divselect.js"></script>

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

<link type="text/css" href="~/scripts/divselect/divselect.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/divselect/divselect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
    <option value="9">印度</option>
    <option value="10">巴西</option>
    <option value="11">意大利</option>
    <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>
    <option value="13">瑞士</option>
    <option value="14">越南</option>
    <option value="15">缅甸</option>
    <option value="16">泰国</option>
    <option value="17">加拿大</option>
    <option value="18" selected="selected">南非</option>
    <option value="19">澳大利亚</option>
    <option value="20">新西兰</option>
    <option value="21">挪威</option>
    <option value="22">巴勒斯坦</option>
    <option value="23">以色列</option>
    <option value="24">新加坡</option>
    <option value="25">马来西亚</option>
    <option value="26">波兰</option>
    <option value="27">国家27</option>
    <option value="28">国家28</option>
    <option value="29">国家29</option>
    <option value="30">国家30</option>
    <option value="31">国家31</option>
    <option value="32">国家32</option>
    <option value="33">国家33</option>
    <option value="34">国家34</option>
    <option value="35">国家35</option>
    <option value="36">国家36</option>
    <option value="37">国家37</option>
    <option value="38">国家38</option>
  </select>
</div>
<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">
  <select name="sel" class="div-select-target" width="200" >
    <option value="1">中国</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
    <option value="4">英国</option>
    <option value="5">俄罗斯</option>
    <option value="6" selected="selected">德国</option>
    <option value="7">韩国</option>
    <option value="8">日本</option>
  </select>
</div>

效果图：

滚动条美化版：

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：

//2015年2月8日
//select美化
var divselectlistindex = 0;

$(function () {
  initdivselect();
});
//初始化select美化插件
function initdivselect() {
  $(".div-select-target").each(function () {
    divselectlistindex++;
    var select = $(this);
    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }
    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divselectlistindex + '"></div>');
    }
    var div = select.next("div");
    var divtext = div.find(".div-select-text");
    var divselect = div.find(".div-select");
    var divarrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divselectlistindex);
    var scrollbar;
    var scrollbarpostop;
    var scrollbarpos;
    var scrollbarscrollheight;
    var scrollbarup;
    var scrollbardown;
    var itemheight;
    var itemcount;
    var itemsheight;
    var scrollflag = false;
    function updatetext(item) {
      divtext.find("div").html(item.html());
    }
    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeclass("div-select-selected");
        item.addclass("div-select-selected");
        updatetext(item);
        list.hide();
        if (scrollbar) scrollbar.hide();
      });
      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedmark = list.find(".div-select-selected");
        selectedmark.removeclass("div-select-selected");
        selectedmark.addclass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeclass("div-select-item-hover");
        item.addclass("div-select-item-hover");
        updatetext(item);
      });
    });
    list.mouseleave(function () {
      var selectedmark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedmark.addclass("div-select-selected");
        updatetext(selectedmark);
      }
      selectedmark.removeclass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeclass("div-select-item-hover");
    });
    if (select.attr("width")) {
      divselect.width(select.attr("width") - 2);
      divtext.width(divselect.width() - divarrow.width());
    }
    else {
      divtext.width(list.width());
    }
    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeclass("div-select-selected-mark");
      list.find(".div-select-item-hover").addclass("div-select-selected");
      list.find(".div-select-item-hover").removeclass("div-select-item-hover");
      if (e.keycode == 40) {
        var currentselected = list.find(".div-select-selected");
        var nextselected = currentselected.next(".div-select-item");
        if (nextselected.length == 0) {
          nextselected = list.find(".div-select-item:first");
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          list.scrolltop(0);
        } else {
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          var i = 0;
          while (nextselected.position().top < 0
            || nextselected.position().top > list.height() - nextselected.height()) {
            list.scrolltop(list.scrolltop() + nextselected.height());
            if (i++ > 100) break;
          }
        }
        updatetext(nextselected);
        updatescrollbarpos();
        return false;
      }
      if (e.keycode == 38) {
        var currentselected = list.find(".div-select-selected");
        var nextselected = currentselected.prev(".div-select-item");
        if (nextselected.length == 0) {
          nextselected = list.find(".div-select-item:last");
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          list.scrolltop(list.find(".div-select-item").length * nextselected.height());
        }
        else {
          nextselected.addclass("div-select-selected");
          currentselected.removeclass("div-select-selected");
          var i = 0;
          while (nextselected.position().top < 0
            || nextselected.position().top > list.height() - nextselected.height()) {
            list.scrolltop(list.scrolltop() - nextselected.height());
            if (i++ > 100) break;
          }
        }
        updatetext(nextselected);
        updatescrollbarpos();
        return false;
      }
      if (e.keycode == 13) {
        var selecteditem = list.find(".div-select-selected");
        var value = selecteditem.attr("value");
        select.val(value);
        list.hide();
        if (scrollbar) scrollbar.hide();
        select.change();
      }
    });
    itemheight = list.find(".div-select-item:first").height();
    itemcount = list.find(".div-select-item").length;
    itemsheight = itemheight * itemcount;
    if (itemsheight > list.height()) {
      $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divselectlistindex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');
    }
    scrollbar = $(".div-select-list-scrollbar-" + divselectlistindex);
    scrollbarpostop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");
    scrollbarpos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");
    scrollbarscrollheight = scrollbarpos.parent().height() - scrollbarpos.height();
    scrollbarup = scrollbar.find(".div-select-scrollbar-up");
    scrollbardown = scrollbar.find(".div-select-scrollbar-down");
    scrollbar.click(function () {
      return false;
    });
    scrollbarup.click(function () {
      list.scrolltop(list.scrolltop() - list.height());
      updatescrollbarpos();
    });
    scrollbardown.click(function () {
      list.scrolltop(list.scrolltop() + list.height());
      updatescrollbarpos();
    });
    scrollbar.mousedown(function () {
      scrollflag = true;
    });
    scrollbar.mouseup(function () {
      scrollflag = false;
    });
    scrollbar.mousemove(function (e) {
      if (scrollflag) {
        var pos = e.pagey - scrollbar.offset().top - 50;
        if (pos <= scrollbarscrollheight) {
          scrollbarpostop.height(pos);
          list.scrolltop(scrollbarpostop.height() / scrollbarscrollheight * (itemsheight - list.height()));
        }
      }
    });
    function updatescrollbarpos() {
      scrollbarpostop.height(scrollbarscrollheight * list.scrolltop() * 1.0 / (itemsheight - list.height()));
      if (list.scrolltop() + list.height() == itemsheight) {
        scrollbarpostop.height(scrollbarscrollheight);
      }
    }
    divselect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
        scrollbar.hide();
      });
      if (list.css("display") == "none") {
        list.show();
        scrollbar.show();
      }
      else {
        list.hide();
        scrollbar.hide();
      }
      list.css("top", divselect.offset().top + divselect.height() + 1);
      list.css("left", divselect.offset().left);
      var listoffsettop = list.offset().top;
      if ($(window).scrolltop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrolltop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divselect.width()) {
        if (!(itemsheight > list.height())) {
          list.width(divselect.width());
        }
        else {
          list.width(divselect.width() - scrollbar.width());
        }
      }
      scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);
      scrollbar.css("left", divselect.offset().left + list.width() + 1);
      scrollbar.css("top", divselect.offset().top + divselect.height() + 1);
      if ($(window).scrolltop() + $(window).height() < listoffsettop + list.height() + 2) {
        scrollbar.css("top", $(window).scrolltop() + $(window).height() - list.height() - 2);
      }
      var currentselected = list.find(".div-select-selected");
      if (currentselected.position().top > list.height() - currentselected.height()) {
        list.scrolltop(currentselected.position().top - currentselected.height() * 2);
      }
      updatescrollbarpos();
      return false;
    });
    $("html,body").bind("click", function () {
      list.hide();
      scrollbar.hide();
    });
    list.click(function () {
      return false;
    });
    function initselect() {
      list.find(".div-select-selected").removeclass("div-select-selected");
      var matchitem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchitem.length > 0) {
        matchitem.addclass("div-select-selected");
        updatetext(matchitem);
      }
    }
    initselect();
    select.change(function () {
      initselect();
    });
  }); // $(".div-select-target").each
}

效果图：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！