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

最新推荐文章于 2025-06-19 03:39:14 发布

从来_没有过

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：下拉列表 css html javascript DIV+CSS

前端专栏收录该内容

6 篇文章

订阅专栏

原文地址：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>