可输入的下拉框

最新推荐文章于 2021-03-19 11:03:47 发布

morley_wang

最新推荐文章于 2021-03-19 11:03:47 发布

阅读量3.6k

点赞数

分类专栏： JS 文章标签： web开发 xhtml class action input html

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY >

<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" οnchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net"> souzz </option>
<option value="www.eWebSoft.com"> eWebSoft </option>
<option value="WEB开发者"> WEB开发者 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY></HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可选择可输入的下拉框</title>
<meta name="Author" content="" />
<style>
form,p {
margin:0;
padding:0;
}
form {
position:relative;
}
.dys {
position:absolute;
z-index:5;
left:111px;
width:18px;
overflow:hidden;
}
.dys select {
margin-left:-111px;
width:129px;
}
.dyw {
position:absolute;
z-index:4;
#top:-1px;
}
.dyw input {
width:113px;
voice-family:"\"}\"";
voice-family:inherit;
width:110px;
#width:107px;
}

</style>

</head>
<body>
<form method="post" action="#">
<p class="dys"><select name="oks" id="oks" οnchange="document.getElementById('okw').value=this.value;">
<option value="可输入的下拉框">可输入的下拉框</option>
<option value="输入文字试试">输入文字试试</option>
<option value="下拉选择试试">下拉选择试试</option>
</select></p>
<p class="dyw"><input type="text" name="okw" id="okw" value="可输入的下拉框" /></p>
</form>
</body>
</html>