gpt4 book ai didi

javascript - html选择滚动条

转载 作者:太空狗 更新时间:2023-10-29 13:06:34 24 4
gpt4 key购买 nike

如何给html选择框添加滚动条?是否有模拟此行为的任何 JavaScript 库?

或者是否有重新设计的界面,我有 2 个选择框,项目可以通过 >> & << Filezilla、norton commander、total commander 类界面移动到右侧选择框,项目可以向左移动和对...(问题是如何重新设计才能在固定宽度的选择框中看到溢出词)

来自 this forum post , 指向另一个 example ,示例代码将使用 div 覆盖以显示附加文本,但它需要用户将鼠标悬停在选项上。不是我正在寻找的解决方案,尽管我暂时会使用它。

<html>

<body>
<table>
<tr><td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</td>
<td>
<input type="button" value=">>"/><br>
<input type="button" value="<<"/>
</td>
<td>
<select size="4" id="mySelect" style="width:65px;color:#f98ad3;">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</td>
</tr>
</table>
</body>
</html>

目标浏览器是MSIE。从上面的代码中,用户看不到“option 1 The long Option”等...并且每个选项最多应该有 200 个字符。

最佳答案

native 不支持 HTML Select 中的水平滚动条。但是,这里有一种创建水平滚动条外观的方法:

<强>1。首先创建一个css类

<style type="text/css">
.scrollable{
overflow: auto;
width: 70px; /* adjust this width depending to amount of text to display */
height: 80px; /* adjust height depending on number of options to display */
border: 1px silver solid;
}
.scrollable select{
border: none;
}
</style>

<强>2。将 SELECT 包装在 DIV 中 - 同时,将大小明确设置为选项数。

<div class="scrollable">
<select size="6" multiple="multiple">
<option value="1" selected>option 1 The Long Option</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 Another Longer than the Long Option ;)</option>
<option value="6">option 6</option>
</select>
</div>

关于javascript - html选择滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/901089/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com