您的位置：首页 > Web前端 > CSS

div+css实现一个可输入的下拉框

2014-11-21 19:56 375 查看

原文地址：http://xiguabaobao.com/46.html

div+css实现一个可输入的下拉框

不使用select元素，因为其无法输入且难以样式化，改用input元素组合一个列表元素ul来实现可输入的下拉框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css实现一个可输入的下拉框</title>
<style type="text/css">
/*Reset*/
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
/*op*/
.op {
width:230px;
margin:10%;
border:1px solid #ccc;
}
.op-result {
width:200px;
padding:12px 15px;
border:none;
outline:none;
}
.op-list {
width:100%;
}
.hide {
display:none !important;
}
.op-list-item {
padding:12px 15px;
background-color:#f3f3f3;
cursor:pointer;
}
.op-list-item:hover {
background-color:#e3e3e3;
}
</style>
<script type="text/javascript">
function op_init(op){
if (!op) return;
var op_list = op.children[1];
if(op_list.className.indexOf('hide') > -1) {
op_list.className = op_list.className.replace(/(^|\s)hide(\s|$)/,'');
} else {
op_list.className += ' hide';
}

op_list.onclick = function(event){
if(event.target.className.indexOf('op-list-item') > -1){
op.children[0].value = event.target.innerHTML;
}
}
}
</script>
</head>

<body>
<div class="op" onclick="op_init(this);">
<input class="op-result" type="text" value="Click to select"/>
<ul class="op-list hide">
<li class="op-list-item">a</li>
<li class="op-list-item">b</li>
<li class="op-list-item">c</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 下拉列表 css html javascript DIV+CSS

相关文章推荐

新的分享

章节导航