html选择滚动条 | html选择滚动条

本文介绍了html选择滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你如何添加一个滚动条到html选择框？是否有任何JavaScript库模拟这种行为？

或者有无论如何重新设计，界面我有2选择框，项目可以通过移动到右边的选择框>>& << Filezilla，诺顿指挥官，总指挥官可以左右移动项目的界面类型...（问题是如何重新设计以查看固定宽度选择框中的溢出词）

来自，指向另一个，示例代码将使用div叠加显示附加文本，但它要求用户悬停在选项上。并非真的是我正在寻找的解决方案，尽管我暂时会使用它。

 < html> 
 
< body> 
< table> 
< tr>< td> 
 < option value =1selected> option 1长选项< / option> 
< option value =2>选项2< / option> 
< option value =3>选项3< / option> 
< option value =4>选项4< / option> 
< option value =5>选项5另一个长于长选项;）< / option> 
< option value =6>选项6< / option> 
< / select> 
< / td> 
< td> 
< input type =buttonvalue =>>/>< br> 
< input type =buttonvalue =<</> 
< / td> 
< td> 
 < option value =1selected> option 1长选项< / option> 
< option value =2>选项2< / option> 
< option value =3>选项3< / option> 
< option value =4>选项4< / option> 
< option value =5>选项5另一个长于长选项;）< / option> 
< option value =6>选项6< / option> 
< / select> 
< / td> 
< / tr> 
< / table> 
< / body> 
< / html>

目标浏览器是MSIE。从上面的代码，用户不能看到'选项1长期选项'等...和每个选项应该有最多200char。

解决方案

HTML Select中的水平滚动条不是本机支持的。但是，下面是一个创建水平滚动条外观的方法：

1。首先创建一个css类

 < style type =text / css> 
 .scrollable {
 overflow：auto; 
 width：70px; / *根据要显示的文字数量调整此宽度* / 
 height：80px; / *根据要显示的选项数量调整高度* / 
 border：1px silver solid; 
} 
 .scrollable select {
 border：none; 
} 
< / style>

2。

 < div 中的SELECT也包含在DIV中 -  ，显式设置大小为选项的数量。类= 滚动 > 
< select size =6multiple =multiple> 
< option value =1selected> option 1长选项< / option> 
< option value =2>选项2< / option> 
< option value =3>选项3< / option> 
< option value =4>选项4< / option> 
< option value =5>选项5另一个长于长选项;）< / option> 
< option value =6>选项6< / option> 
< / select> 
< / div>

how do you add a scroll bar to the html select box? is there any javascript library that emulate this behavior?

or is there anyway to redesign, the interface I have 2 select box, items can be shifted to the right select box via >> & << Filezilla, norton commander, total commander kind of interface where items can be shifted left and right... (question is how to redesign to see the overflow words in the fixed width select box)

from this forum post, pointing to another example, the sample code will overlay using div to show the additional text, but it requires the user to hover on the options. not really the solution I am looking for, though I will use it for the time being.

<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>

the target browser is MSIE. from the above code, the user cant see 'option 1 The long Option' etc... and each option supposed to have up to a maximum of 200char.

解决方案

Horizontal scrollbars in a HTML Select are not natively supported. However, here's a way to create the appearance of a horizontal scrollbar:

1. First create a css class

<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. Wrap the SELECT inside a DIV - also, explicitly set the size to the number of options.

<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>

这篇关于html选择滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！