[分享]css去除select滚动条

CSS 是一种常用的网页样式设计语言，用于美化网页布局。有一种常见的需求是需要去除 select 元素的滚动条，让页面更加简洁美观。/ 去除 select 元素的滚动条 / select { webk...

CSS 是一种常用的网页样式设计语言，用于美化网页布局。有一种常见的需求是需要去除 select 元素的滚动条，让页面更加简洁美观。

/* 去除 select 元素的滚动条 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: "";
}

/* 给 select 元素添加自定义样式 */
select::-ms-expand {
    display: none;
}
select::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: transparent;
} 

以上是完成这一需求的核心代码。简单解释一下：

• 使用 -webkit-appearance、-moz-appearance、appearance 属性将 select 元素的默认外观设置为 none，消除浏览器默认的样式

• 使用 overflow: hidden 将 select 元素的滚动条隐藏

• 使用 text-overflow: "" 去掉 select 元素中文本溢出的省略号

• ::-ms-expand 是用于 IE 浏览器的属性。通过将其 display 设为 none，可以隐藏 IE 浏览器中 select 元素右侧的箭头

• ::-webkit-scrollbar 是用于 WebKit 内核的浏览器，通过将其宽度和高度设置为 0，可以隐藏滚动条

通过以上代码，我们就能够很方便地去除 select 元素的滚动条，并对其样式进行自定义。如果有这方面的需求，不妨试试这个方法。