“你知道如何制作 HTML 下拉菜单吗？5步教你实现自定义下拉菜单设计”

如何设置下拉列表的默认选项？

默认情况下，下拉列表中的第一个选项将被设置为默认选项，如果你希望将其他选项作为默认选项，则可以在<option>标签中使用selected属性来指定。

例如：

<select id="hobby">
    <option value="reading">阅读</option>
    <option value="sports" selected>运动</option>
    <option value="music">音乐</option>
    <option value="traveling">旅行</option>
</select>

在上面的示例中，我们将第二个选项“运动”设置为默认选项，通过在该选项的<option>标签中添加selected属性来实现。

如何使下拉列表可以选择多个选项？

默认情况下，下拉列表只允许选择一个选项，如果你希望允许用户选择多个选项，则可以在<select>标签中添加multiple属性。

例如：

<select id="hobby" multiple>
    <option value="reading">阅读</option>
    <option value="sports">运动</option>
    <option value="music">音乐</option>
    <option value="traveling">旅行</option>
</select>

在上面的示例中，我们在<select>标签中添加了multiple属性，这样在下拉列表中选择多个选项将会被允许。

如何使用CSS样式美化下拉列表？

使用CSS样式可以使下拉列表更美观和易于使用，你可以使用CSS属性为下拉列表添加圆角、边框、阴影、背景颜色等特效。

例如：

<style>
select {
    padding: 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-color: #f5f5f5;
    font-size: 18px;
    color: #333;
}
</style>

<select id="hobby">
    <option value="reading">阅读</option>
    <option value="sports">运动</option>
    <option value="music">音乐</option>
    <option value="traveling">旅行</option>
</select>

在上面的示例中，我们在