select 选择框可以下拉选择或者自行输入

最新推荐文章于 2024-11-29 15:21:28 发布

转载最新推荐文章于 2024-11-29 15:21:28 发布 · 1.8k 阅读

xHTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS技巧来实现input标签与select标签的联动效果的方法。通过简单的HTML和CSS布局，并利用JavaScript的onChange事件，可以实现在选择不同选项时自动填充input标签的内容。

实质上是用CSS将一个input标签和一个select标签重合做出来的效果，select发生onchange时间时，将对应的value写到input标签中，还是蛮巧妙的。

<div style="position:relative;"> 
<span style="margin-left:100px;width:18px;overflow:hidden;"> 
<select style="width:118px;margin-left:-100px" onChange="this.parentNode.nextSibling.value=this.value"> 
<option value="corange.cn">corange.cn</option> 
<option value="www.corange.cn">www.corange.cn </option> 
<option value="corange"> corange </option> 
</select></span><input name="box" style="width:100px;position:absolute;left:0px;"> 
</div>

原文地址：http://www.corange.cn/archives/2009/09/3440.html