js+css实现select的美化效果

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了js+css实现select的美化效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

先给大家看一看美化之后的效果图：

CSS：

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

$(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"&gt;<div class="div-select-text"&gt;<div></div></div><div class="div-select-arrow"&gt;<div>∨</div></div></div></div>');
  $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"&gt;</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 + '"&gt;' + 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：

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

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">

二、滚动条美化版：

CSS：

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

$(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"&gt;<div class="div-select-text"&gt;<div></div></div><div class="div-select-arrow"&gt;<div>∨</div></div></div></div>');
  $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"&gt;</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 + '"&gt;' + 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 + '"&gt;<div class="div-select-scrollbar-up"&gt;∧</div><div class="div-select-scrollbar-pos"&gt;<div></div><div></div></div><div class="div-select-scrollbar-down"&gt;∨</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().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,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
}

效果图：

内容，希望对大家学习javascript程序设计有所帮助。

js美化select

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作