如何在Chrome中自定义<datalist>元素的激活状态边框？

首先需要明确：<datalist>元素本身是不可见的，它仅作为<input>的选项数据源存在。你看到的激活状态蓝色边框，要么是关联<input>获得焦点时的默认轮廓，要么是Chrome原生渲染的下拉选项面板边框，针对这两种情况有不同的解决方式：

1. 修改焦点状态的边框/轮廓 #

你尝试的:active、:hover伪类不生效，是因为输入框激活（展开datalist选项）时处于**:focus状态**，而非:active或:hover。可以通过以下CSS覆盖默认样式：

/* 去掉Chrome默认的蓝色焦点轮廓，替换为自定义样式 */
input:focus {
  outline: none;
  border: 2px solid #663399; /* 自定义边框颜色 */
  box-shadow: 0 0 4px rgba(102, 51, 153, 0.5); /* 可选：添加阴影增强视觉效果 */
}

2. 修改datalist下拉面板的边框 #

Chrome的原生datalist下拉面板属于浏览器内置UI控件，没有公开的CSS选择器可以直接修改其样式。如果需要完全自定义下拉面板的边框，只能通过模拟datalist功能实现：

• 隐藏原生<datalist>，用<div>等元素手动渲染选项列表
• 监听<input>的输入事件和焦点事件，动态显示/隐藏自定义选项列表
• 给自定义列表设置任意样式（包括边框）

示例简化代码：

<input type="text" id="customInput" placeholder="输入内容">
<!-- 自定义下拉面板 -->
<div id="customOptions" style="display:none; border:2px solid #ff6b6b; border-top:none; padding:8px; background:white;">
  <div class="option">选项1</div>
  <div class="option">选项2</div>
</div>

<script>
const input = document.getElementById('customInput');
const optionsPanel = document.getElementById('customOptions');

// 焦点显示面板
input.addEventListener('focus', () => {
  optionsPanel.style.display = 'block';
});

// 点击选项填充输入框
document.querySelectorAll('.option').forEach(opt => {
  opt.addEventListener('click', () => {
    input.value = opt.textContent;
    optionsPanel.style.display = 'none';
  });
});
</script>

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