包含HTML中复选框列表的可滚动框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (85)

将看到我为所需的UI所做的模拟图片。我需要某种类型的可滚动框,其中包含复选框。

我想到了一个可滚动的div,虽然我找不到在div周围设置边框的方法?第二,我想到了一个..。但也不太确定这是否是我的最佳选择。

有人可能有更容易/更好的方法来做这件事吗?

提前谢谢!

提问于
用户回答回答于

CSS:

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

HTML:

<div class="container">
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
</div>

它的外观:

这就是你要找的吗?

用户回答回答于
<style type="text/css">
   select, ul { height: 100px; overflow: auto; width: 100px; border: 1px solid #000; }
   ul { list-style-type: none; margin: 0; padding: 0; overflow-x: hidden; }
   li { margin: 0; padding: 0; }
   label { display: block; color: WindowText; background-color: Window; margin: 0; padding: 0; width: 100%; }
   label:hover { background-color: Highlight; color: HighlightText; }
  </style>
<ul>
   <li><label for="chk1"><input type="checkbox" name="chk1" id="chk1">First</label></li>
   <li><label for="chk2"><input type="checkbox" name="chk2" id="chk2">Second</label></li>
   <li><label for="chk3"><input type="checkbox" name="chk3" id="chk3">Third</label></li>
   <li><label for="chk4"><input type="checkbox" name="chk4" id="chk4">Fourth</label></li>
   <li><label for="chk5"><input type="checkbox" name="chk5" id="chk5">Fifth</label></li>
   <li><label for="chk6"><input type="checkbox" name="chk6" id="chk6">Sixth</label></li>
   <li><label for="chk7"><input type="checkbox" name="chk7" id="chk7">Seventh</label></li>
  </ul>

扫码关注云+社区

领取腾讯云代金券