HTML + CSS 连载 | 36 - select 下拉列表
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
在HTML中，我们可以使用<select>元素来创建下拉列表，并使用<option>元素来定义下拉列表中的选项。在CSS中，我们可以使用样式来美化这些元素。
以下是一个简单的例子：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表示例</title>
<style>
select {
padding: 5px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
option {
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<select>
<option value="option1" selected>选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4">选项4</option>
</select>
</body>
</html>在这个例子中，我们创建了一个简单的下拉列表，其中包含四个选项。我们还使用CSS为<select>和<option>元素添加了一些基本样式。当用户点击下拉列表时，可以看到四个选项，并且可以选择其中一个。
评论已关闭