迹忆客 专注技术分享

在本文中，我们将介绍一些在 CSS 中设置选择下拉菜单样式的方法。

使用 appearance:none 隐藏默认箭头并在 CSS 的选择下拉列表中设置自定义箭头

我们可以通过隐藏默认箭头集并添加自定义箭头集来仅使用 CSS 来设置选择下拉菜单的样式。有一个 CSS 属性 appearance 定义了基于操作系统的元素的样式。使用 appearance 属性应用的样式将是平台原生的。我们可以在 select 标签上使用这个属性，并在下拉菜单中定义箭头。appearance 属性中的 none 选项将从下拉列表中隐藏默认箭头。然后，我们可以上传我们的自定义箭头。我们可以在基于 WebKit 和基于 Blink 的浏览器中使用 -webkit-appearance 和 -moz-appearance 属性。

例如，使用 HTML 中的 select 和 option 标签创建一个下拉列表。写下你选择的选项。在 CSS 中，选择 select 标签并设置不同的属性，如 margin、width、height、padding、font-size、border。接下来，使用 appearance 属性并将其设置为 none。然后，使用 background 速记属性来设置自定义箭头。使用 url() 函数选择图像。使用 background-repeat、background-size 和 background-color 等属性为图像设置样式。使用 no-repeat 选项显示图像一次。将位置设置为 100%，将 background-size 设置为 15%。

因此，我们使用 CSS 设计了一个下拉菜单。

示例代码：

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

使用 overflow:hidden 隐藏默认箭头并在 CSS 的选择下拉列表中设置自定义箭头

我们可以用 div 包裹 select 标签并将其 overflow 设置为 hidden 以隐藏下拉菜单中的默认箭头。然后，我们可以添加我们的自定义箭头，与第一种方法相同。将 overflow 属性设置为 hidden 将裁剪容器中的溢出。其余内容将被隐藏。我们将定义 div 的宽度小于下拉菜单。因此，在 overflow 属性上使用 hidden 值时，下拉菜单中的箭头将落在容器之外。最后，我们可以添加我们的自定义箭头。

例如，使用类 menu 创建一个 div。在 div 中，编写与第一种方法相同的下拉项。在 CSS 中，选择作为 .menu select 的 menu 类的后代的 select 标记，并应用样式。将 background 设置为 transparent。创建 140px 的 width。将 font-size 设置为 14px 并创建一个边框。将菜单的高度设置为 35px。接下来，选择 menu 类并指定 40px 的边距、125px 的宽度和 34px 的高度。确保容器的宽度小于菜单。接下来，将 overflow 设置为 hidden 并将背景图像设置为第一种方法。

在这里，我们删除了下拉菜单的默认箭头，并添加了一个自定义箭头。因此，我们可以在 CSS 中设置选择下拉菜单的样式。

示例代码：

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}