本文介绍了一种使用HTML和CSS结合JavaScript实现自定义下拉框的方法，解决了原生下拉框样式不可定制的问题。通过ul和li元素模拟下拉菜单，并利用jQuery控制显示与隐藏及交互效果。
在工作中原生的下拉框完成不了 设计图的要求，select中option不能修改高度，因此需要自己模拟一个下拉框，用ul,li来实现一个下拉框的功能代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charse="utf-8">
<titile></title>
<style type="text/css">
*{padding:0;margin:0}
body{font-family:"微软雅黑";font-size:16px}
.box{width:600px;margin:200px auto;position:relative;}
.box input{font-weight:normal;font-size:16px;height:38px;border:1px solid #ccc;cursor:pointer;width:260px;box-shadow:0 0 3px #aaa;text-indent:15px;position:relative;font-family:"微软雅黑;"}
ul{border:1px solid #ccc;border-top:0;box-shadow:0 0 3px #aaa;lin-height:38px;width:260px;position:absolute;top:38px;background:#fff;list-style:none;text-indent:15px;display:none;}
ul li{cursor:pointer;}
li:hover{background:#aaa;}
.arrow{width:0px;height:0px;boder-width:10px;border-style:solid dashed dashed dashed;border-left-corlor:transparent;border-right-color:transparent;border-botttom-color:transparent;}
.arrowTop{border-bottom-color:black;border-top-color:transparent;top:2px}
</style>
<head>
<body>
<div class="box">
<input value="english" class="inputValue" readonly="readonly" type="text"/>
<ul id="selectLanByLoginUl">
<li data-value="1"></li>
<li data-value="2"></li>
</ul>
</div>
<div class="arrow"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
=============================test.js中代码如下==================
$(function(){
//点击弹出下拉框：
$(".inputValue").unbind("click").click(function(){
if($(".box").find("ul").css("display")=="none"){
$(".box").find("ul").show();
//增加箭头样式
$(".arrow").addClass("arrowTop");
}else{
$(".box").find("ul").hide();
//去掉向上的箭头改成向下的
$(".arrow").removeClass("arrowTop");
}
})
$(".box").bind({
//"mouseenter":function(){
//$(this).find("ul").show();
//},
//"mouseleave":function(){
//$(this).find("ul").hide();
//},
"click":function(event){
if(event.target.tagName=="LI"){
$(this).find("input").val($(event.target).text());
$(this).find("ul");
}
//$(this).find("ul");
}
})
$("#selectLanByLoginUl li").each(function(){
if($(this).text()=="spanish"){
$(this).find("input").val($(this).text());
}
})
})
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
