js+css實現select的美化效果

2019-11-20 10:21:03

字體：大中小

來源：轉載

供稿：網友

先給大家看一看美化之后的效果圖：

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：

//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}

2、如何使用：

第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" 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="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：

//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}

效果圖：