如何不依赖第三方控件创建始终可见的HTML5 ListBox（类WinForms）

你可以通过原生HTML、CSS和JavaScript实现完全等价于WinForms原生ListBox的控件，无需任何第三方库，核心思路是用语义化的HTML结构配合样式模拟原生外观，再通过JS实现交互逻辑。

1. 基础HTML结构 #

用<ul>作为列表容器，<li>作为列表项，语义化且易于样式控制：

<div class="list-box-container">
  <h3>选择选项</h3>
  <ul class="winforms-listbox" id="myListBox">
    <li class="list-item">选项1</li>
    <li class="list-item">选项2</li>
    <li class="list-item">选项3</li>
    <li class="list-item">选项4</li>
    <li class="list-item">选项5</li>
    <li class="list-item">选项6</li>
    <li class="list-item">选项7</li>
  </ul>
</div>

2. CSS样式模拟原生WinForms ListBox外观 #

通过样式实现边框、固定高度、滚动、选中/hover效果：

/* 容器样式 */
.list-box-container {
  width: 200px;
  margin: 20px;
}

/* 核心ListBox样式 */
.winforms-listbox {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #7f9db9; /* 模拟原生边框 */
  width: 100%;
  height: 150px; /* 固定高度，超出滚动 */
  overflow-y: auto;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* 列表项样式 */
.list-item {
  padding: 4px 8px;
  cursor: default; /* 原生ListBox光标样式 */
}

/* Hover效果 */
.list-item:hover {
  background-color: #e6f7ff;
}

/* 选中状态样式 */
.list-item.selected {
  background-color: #1e90ff;
  color: #ffffff;
}

/* 滚动条样式（可选，模拟原生风格） */
.winforms-listbox::-webkit-scrollbar {
  width: 12px;
}

.winforms-listbox::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.winforms-listbox::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.winforms-listbox::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

3. JavaScript实现交互逻辑 #

支持单选（默认）或多选（按住Ctrl/Shift），模拟WinForms的选中行为：

const listBox = document.getElementById('myListBox');
const listItems = listBox.querySelectorAll('.list-item');
let lastSelectedIndex = -1;

listItems.forEach((item, index) => {
  item.addEventListener('mousedown', (e) => {
    // 多选逻辑：按住Ctrl键添加/取消选中
    if (e.ctrlKey) {
      item.classList.toggle('selected');
      lastSelectedIndex = index;
    } 
    // 连续多选：按住Shift键选中区间
    else if (e.shiftKey && lastSelectedIndex !== -1) {
      const start = Math.min(lastSelectedIndex, index);
      const end = Math.max(lastSelectedIndex, index);
      listItems.forEach((el, i) => {
        if (i >= start && i <= end) {
          el.classList.add('selected');
        } else {
          el.classList.remove('selected');
        }
      });
    } 
    // 单选逻辑：默认点击选中单个
    else {
      listItems.forEach(el => el.classList.remove('selected'));
      item.classList.add('selected');
      lastSelectedIndex = index;
    }
  });
});

// 获取当前选中项的方法
function getSelectedItems() {
  return Array.from(listItems).filter(item => item.classList.contains('selected'));
}

额外扩展 #

• 如果需要绑定数据，可以通过JS动态生成<li>元素
• 支持键盘导航（上下箭头选中、Enter确认），只需添加键盘事件监听
• 调整样式参数可以匹配不同系统的原生ListBox外观

内容的提问来源于stack exchange，提问作者Cameron Landers