代码之家 › 专栏 › 技术社区 › Sergei

在Firefox和Chrome中隐藏多行选择的垂直滚动条?

scrollbar google-chrome select firefox

Sergei · 技术社区 · 15 年前

这个问题似乎很简单( overflow:hidden 对吧?)直到我解决不了。我有一个简单的多行选择和定义的大小:

<select size="10" name="elements">
... 
</select>

msie和opera只在需要时显示垂直滚动条,但firefox和chrome 总是显示处于禁用状态的垂直滚动条。

我试过设置overflow,overflow-y,甚至overflow-x,但没有任何效果。有什么想法吗?

7 回复 | 直到 11 年前

Chris Dennett 15 年前

显然,你不能: http://www.webdeveloper.com/forum/showthread.php?t=154496

mon 12 年前

<div style="overflow: hidden;">
<select style="width: 110% ; border: 0px;">
.....

DroidOS 12 年前

现在这是一条相当古老的线索,但我想还有其他人会像我一样,在寻找同一个问题的答案的时候碰到它。对于Webkit浏览器,有一个非常简单的解决方案,因为它们(Chrome和Safari)允许对滚动条进行样式化。

这里有一个很好的参考,你可以做的很多事情 webkit scrollbars . 这里需要的CSS是

select::-webkit-scrollbar{width:1px;background-color:transparent}

关键是要做两件事

使滚动条只有一个像素宽,这样它就不会妨碍
将其背景色设置为transprent

如果您希望它只对select滚动条的一个子集有效,那么您应该通过更改虚拟类的滚动条来更改CSS。

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

然后将该类用于要修改的选择。例如

<select class='subsel' id='selOne' size='4'>
 <option value='1'>Option One</option>
 <option value='2'>Option Two</option>
</select>

这是一个显示“已删除”滚动条的小提琴

rememebr it will only work with Webkit browsers!

no name 14 年前

你可以, using some JavaScript

不是最好的解决方案,但应该有效:)

Tim Ludwinski 13 年前

试试这个:

<html>
<head>
<style>
div.border {
    margin-right: 0px;
    border-style:solid;
        overflow:hidden;
}
select.hiddenscroll {
    margin-right: -20px;
    margin-top: -3px;
    margin-bottom: -3px;
    padding-right: -20px;
        overflow:hidden;
}
</style>
</head>
<body>
    <table>
    <tr><td>
    <div class="border" style="overflow:hidden;">
        <select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>  
        </select> 
    </div>
    <table>
    </tr></td>
</body>
</html>

Community CDub 8 年前

@mon的解决方案在某些情况下会中断(例如,在表单元格内),尽管这是一个很好的解决方案。然而,这一个类似但更好:

Hide vertical scrollbar in <select> element, solution with margins

-1

Gert Grenander Keiron Lowe 15 年前

我唯一能想到的就是通过定位图像或实体来重叠滚动条。 DIV 上面有一个更高的z索引 SELECT 滚动条。但这将是一个丑陋的黑客。

推荐文章

user3425506 · 没有互联网连接无法获得PWA

5 月前

sunics · jQuery在ul中查找li元素

1 年前

Marlon · 在Navigationextras中传递大数据router.navigation Angular 16导致Firefox错误

1 年前

Curious66 · 如何在谷歌会议中捕获传入的音频流

1 年前

Tricotou · $.get(code_url)执行返回的代码,不使用eval(),也不将其附加到DOM。jQuery安全性失败?

1 年前

ÙØÙØ¯ Ø§ÙÙÙ · 使用sendMessage功能时从Chrome扩展程序获取数据的延迟

1 年前

Patrick Potocny · Next.js 14草稿模式在iframe中不起作用(无头CMS预览)

1 年前

Vrushabh Ranpariya · 谷歌Chrome-开发工具-网络选项卡:设计更新

1 年前

Johnny Chen · 相同的字体在chrome和firefox中的显示方式不同

1 年前

Alexander Mills · Flutter不将Chrome识别为“web”,反之亦然

1 年前