用html5做一个隐藏的下拉框
时间: 2023-10-12 16:22:43 浏览: 156
可以使用HTML5中的`<datalist>`标签来实现一个隐藏的下拉框。具体实现步骤如下:
1. 使用`<input>`标签创建一个文本输入框,并添加`list`属性,该属性的值为下拉框的`<datalist>`标签的id值。
```html
<input type="text" list="fruits">
```
2. 使用`<datalist>`标签创建一个下拉框,设置`id`属性,并在标签内部添加`<option>`标签作为下拉框选项。
```html
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Durian">
</datalist>
```
3. 通过CSS设置`<datalist>`标签的`display`属性为`none`,使其在页面中不可见。
```css
#fruits {
display: none;
}
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>隐藏的下拉框</title>
<style>
#fruits {
display: none;
}
</style>
</head>
<body>
<label for="fruit-input">请选择水果:</label>
<input type="text" id="fruit-input" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Durian">
</datalist>
</body>
</html>
```
这样,用户在输入框中输入字符时,会根据下拉框选项进行自动匹配和提示。
阅读全文