带有滚动条的 CSS 下拉菜单 - CSS (1)

📌 相关文章

📜 带有滚动条的 CSS 下拉菜单 - CSS (1)

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

CSS滚动条下拉菜单

在Web应用程序中，下拉菜单是非常常见的组件之一。下拉菜单允许用户从预定义的选项中选择一个选项，这些选项通常在选项列表中垂直排列。

但有时，在下拉菜单中添加大量项目将导致页面布局的混乱。为了避免这种情况，我们可以添加滚动条到下拉菜单中。此外，我们还可以轻松使用CSS创建漂亮的下拉菜单UI。

HTML

我们使用标准的HTML <select>元素来创建下拉菜单。要将滚动条添加到下拉菜单中，我们还需要在包装容器中使用自定义div元素。

<div class="select-wrapper">
  <select name="select" id="select">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option10">Option 10</option>
  </select>
</div>

CSS

下面是用于创建带有滚动条的下拉菜单的CSS样式。

.select-wrapper {
  position: relative;
  display: inline-block;
  margin: 10px;
  width: 150px;
  height: 42px;
  overflow: hidden;
  user-select: none;
}

.select-wrapper select {
  width: 150%;
  border: none;
  background: #fff;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 4px;
  height: 42px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  background: #f7f7f7;
  pointer-events: none;
  z-index: 2;
}

.select-wrapper::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 8px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: solid #000;
  border-width: 0 2px 2px 0;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
}

/* 滚动条样式 */

.select-wrapper::-webkit-scrollbar {
  width: 10px;
}

.select-wrapper::-webkit-scrollbar-track {
  background: #f7f7f7;
}

.select-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
}

.select-wrapper::-webkit-scrollbar-thumb:hover {
  background: #999;
}

解释

首先，我们使用定位方式position: relative来指定下拉菜单的离开

居中布局：display: inline-block和margin: 10px；

为了容纳下拉菜单，我们必须使用一个自定义的div元素<div class="select-wrapper">。我们使用overflow: hidden属性将下拉菜单包装器中非常长的下拉菜单隐藏起来。我们还使用user-select:none以确保用户无法选择包含该下拉菜单的元素。

接下来，我们使用定位方式position: relative将下拉菜单放置在包装容器上方。但是，这样容易受到父元素中的限制，因此我们对下拉菜单应用z-index:1以确保它在所有其他元素上方。

我们还要为下拉菜单增加::after伪元素，用于在下拉菜单右侧添加一个小三角标记。

接下来，我们定义滚动条的样式。我们使用带有“-webkit-”前缀的伪元素::-webkit-scrollbar来定义滚动条。我们使用::-webkit-scrollbar-track为滚动条添加背景色。我们还添加::-webkit-scrollbar-thumb用于添加滚动条的拇指样式。最后，我们使用:hover伪类来更改鼠标在滚动条上的样式。

效果

最终的效果如下：

scrollbar-select-menu

代码片段如下（请将markdown切换到代码模式下查看）：

## CSS滚动条下拉菜单

在Web应用程序中，下拉菜单是非常常见的组件之一。 下拉菜单允许用户从预定义的选项中选择一个选项，这些选项通常在选项列表中垂直排列。

但有时，在下拉菜单中添加大量项目将导致页面布局的混乱。 为了避免这种情况，我们可以添加滚动条到下拉菜单中。 此外，我们还可以轻松使用CSS创建漂亮的下拉菜单UI。

### HTML

我们使用标准的HTML `<select>`元素来创建下拉菜单。 要将滚动条添加到下拉菜单中，我们还需要在包装容器中使用自定义`div`元素。

```html
<div class="select-wrapper">
  <select name="select" id="select">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option10">Option 10</option>
  </select>
</div>

CSS