如何使用input 制作带下拉选择的填写框

INPUT是制作网站中的填写框的HTML元素，例如制作提交表单中的填写框，都是使用INPUT标签。

常用实例代码：

<input value="www.xuewangzhan.net" >

除了input 之外，我们一般使用SELECT元素制作下拉框：

<select id="name" >

<option value="1">张三</option>

<option value="2">李四</option>

</select>

使用SELECT元素制作下拉框，只能下拉选择，无法自己输入内容。那么如何制作带有编辑填写功能的下拉选择框呢？

如果需要能编辑里面的内容则使用input实现，input有个属性，list,自定义list中的内容即可。

<div class="changeDiv">

<a>性别:</a>

<input id="sex" type="text" list="sexlist">

<datalist id="sexlist">

<option>男</option>

<option>女</option>

</datalist>

</div>

CSS样式代码：

div.changeDiv input {

font-size: 1em;

font-family: 仿宋, serif;

width: 60%;

display: block;

margin-left: 10%;

opacity: 0.8;

padding: 0.2em;

color: #000000;

border-radius: 10px;

background-color: #bed8df;

}

datalist标签里面写下拉的内容，此为一个选择性别的框，里面有男女两个选项，datalist的id一定要和input 的list属性的值一致。

效果如下