📜  Liste deroulante (1)

📅  最后修改于: 2023-12-03 15:17:24.622000             🧑  作者: Mango

列表下拉框

列表下拉框(Drop-Down List)是一种常见的网页交互控件,通常用于用户选择一个或多个选项。这种控件允许用户通过单击下拉箭头,展开一个垂直列表,从中选择一个选项。

HTML 代码示例

以下是一个简单的 HTML 列表下拉框的代码示例:

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
</select>

其中,<select> 标签定义一个下拉列表框,<option> 标签定义下拉列表框中的选项。

属性

下面是一些常用的下拉列表框属性:

  • name:指定下拉列表框的名称。
  • size:指定下拉列表框可见的选项数。
  • multiple:指定是否允许选择多个选项。
  • disabled:指定下拉列表框是否被禁用。
  • form:指定下拉列表框所在的表单。
CSS 样式

下面是一些常用的下拉列表框 CSS 样式:

select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 24px 8px 8px;
  font-size: 16px;
  background-color: #fff;
  background-image: url("arrow.png");
  background-position: right 8px center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

其中,borderborder-radiuspadding 等属性用于设置下拉列表框的边框、圆角、内边距等样式。font-size 属性用于设置下拉列表框中文本的字体大小,background-color 属性用于设置下拉列表框的背景色。background-imagebackground-positionbackground-repeat 等属性用于设置下拉箭头的样式。-webkit-appearance-moz-appearanceappearance 等属性用于取消浏览器默认的下拉列表框样式。

JavaScript 事件

下面是一些常用的下拉列表框 JavaScript 事件:

  • onchange:当选择框中的选项被改变时触发。
  • onclick:当选择框被点击时触发。
  • onfocus:当选择框获得焦点时触发。
  • onblur:当选择框失去焦点时触发。
总结

列表下拉框是一种常见的网页交互控件,允许用户选择一个或多个选项。通过 HTML、CSS 和 JavaScript,我们可以方便地创建和美化自己的下拉列表框。