无聊时写的自定义select框，原生的select的文字内容是真的难居中，所以自己写了一个。缺点：option过长会导致整个html被拉长。所以不建议过长，因为现在本人无法知道怎么将框可以像原生的那样超越窗口显示。
下面源码：（下拉框图片没有传，在下方链接中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.selbody {
width: 130px;
height: 31px;
margin-top: 20px;
margin-left: 30px;
background-color: #dfdfdf;
text-align: center;
position: relative;
line-height: 31px;
border: 0.5px solid gray;
}
.seled {
}
.arrow {
position: absolute;
cursor: pointer;
top: 10px;
right: 2px;
height: 11px;
width: 14px;
background:url("triangle.png") center center no-repeat;
}
.selItems {
width: 130px;
display: none;
margin-top: 0;
position: absolute;
top: 31px;
left: -0.5px;
background-color: rgba(238,238,238,0.9);
border-left: 0.5px solid gray;
border-right: 0.5px solid gray;
border-bottom: 0.5px solid gray;
}
.selItem {
height: 23px;
width: 130px;
text-align: center;
line-height: 23px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".arrow").click(function(){
$(".selItems").toggle();
if($(".selItems").is(":visible")) {
var text = $(".seled").text();
$(".selItem").each(function(index){
if(text == $(this).text()) {
$(".selItem").css("background-color","");
$(this).css("background-color","blue");
}
});
var selItemsHeight = $(".selItems").height();
var windowScrollTop = $(window).scrollTop();
var selBodyOffsetTop = $(".selbody").offset().top;
var selBodyTop = selBodyOffsetTop + $(".selbody").height() - windowScrollTop;
if((selBodyTop + selItemsHeight > $(window).height()) && (selBodyOffsetTop - windowScrollTop > selItemsHeight)) {
$(".selItems").css("top",0 - $(".selItems").height()).css("border-top","0.5px solid gray");
} else {
$(".selItems").css("top",31);
}
}
});
$(".selbody").mouseleave(function(){
$(".selItems").hide();
})
$(".selItem").hover(function(){
$(this).siblings().css("background-color","");
$(this).css("background-color","blue").css("cursor","pointer");
});
$(".selItem").click(function(){
$(".seled").text($(this).text());
$(".selItems").hide();
});
})
</script>
</head>
<body>
<div class="selbody">
<div class="seled">宁波市</div>
<div class="arrow"></div>
<div class="selItems">
<div class="selItem">宁波市</div>
<div class="selItem">慈溪市</div>
<div class="selItem">鄞州区</div>
<div class="selItem">象山县</div>
</div>
</div>
</body>
</html>
效果展示：
自定义select.gif
完整源码见：https://github.com/hzhqk/html/tree/master/custom_select
网友评论