css 中加入下拉列表

在 CSS 中加入下拉列表比较简单，仅需为器皿原素设定 overflow 特性就可以。

1. 设定 overflow 特性

overflow 特性操纵原素具体内容超出其外框时怎样处理。要表明下拉列表，可以用下列值：

• overflow-x: 仅表明水准下拉列表。
• overflow-y: 仅表明竖直下拉列表。
• overflow: 同时显示横向和纵向下拉列表。

实例:

马上学习培训“前面完全免费学习心得（深层次）”；

div {
  overflow: scroll;
}

2. 特定器皿尺寸

下拉列表只会在器皿原素具备固定不动尺寸的时候才会表明。这可以通过设定元素 width、height 或 max-height 特性来达到。

实例:

马上学习培训“前面完全免费学习心得（深层次）”；

div {
  width: 300px;
  height: 150px;
  overflow: scroll;
}

3. 具体内容超过器皿

当器皿元素具体内容超过其尺寸时，将显示下拉列表，用户可以翻转内容以查看隐藏的那一部分。

实例:

马上学习培训“前面完全免费学习心得（深层次）”；

<div>
  <p>这是一段比较长的文本，将超过容器尺寸。</p>
</div>

div {
  width: 300px;
  height: 150px;
  overflow: scroll;
}

别的选择项

除开 overflow 特性以外，还有其他的 CSS 特性适合于自定下拉列表的外观个人行为：

• overscroll-behavior: 操纵下拉列表超过可翻转地区之后的个人行为。
• scroll-behavior: 操纵信息在翻转时如何光滑翻转。
• scrollbar-width: 设定下拉列表宽度或相对高度。
• scrollbar-color: 设定下拉列表轨迹和滚轮颜色。

根据使用这种特性，您可以创建具备自定外观违法行为的下拉列表。

以上就是关于css下拉列表如何添加的详细内容，大量欢迎关注php中文网站其他类似文章！