如何实现输入框顶部指向对应列表项的箭头指针？

我来帮你搞定这个箭头指针的需求！其实用伪元素来实现是最灵活的，比直接修改input形状或者用border硬凑靠谱多了，而且能轻松定位到你点击的列表项。下面是具体的实现方案：

核心思路 #

• 给每个列表项绑定点击事件，标记当前激活的项，同时获取它的位置信息
• 给input的父容器添加一个伪元素作为箭头，默认隐藏，当有激活项时显示并调整位置到对应列表项的正下方
• 用CSS border方法绘制箭头（这次把它放在伪元素上，完全不影响input本身的功能）

完整实现代码 #

HTML（调整结构，增加可点击标识和对应输入关联）

<div class="row notesInput">
  <div class="col-lg-12">
    <div class="tabs">
      <ul style="border-bottom:none !important; text-decoration:none">
        <li class="tab-item" data-target="public">Public</li>
        <li class="tab-item" data-target="internal">Internal</li>
      </ul>
    </div>
    <div class="input-wrapper">
      <input type="text" name="public" id="public">
      <input type="text" name="internal" id="internal" style="display:none;">
    </div>
  </div>
</div>

CSS（添加箭头伪元素、激活状态样式）

.tabs{ 
  margin-top: 30px; 
  user-select: none; 
  align-items: stretch; 
  display: flex; 
  font-size: 1rem; 
  justify-content: space-between; 
  overflow: hidden; 
  overflow-x: auto; 
  white-space: nowrap; 
}
.tabs ul{ 
  align-items: center; 
  border-bottom: 1px solid #dbdbdb; 
  display: flex; 
  flex-grow: 1; 
  flex-shrink: 0; 
  justify-content: flex-start; 
  list-style: none; 
  padding:0px !important; 
}
.tabs li.tab-item{ 
  cursor: pointer; /* 提示可点击 */
  display:block; 
  text-align:center !important; 
  margin-left:15px; 
  margin-bottom:-.15em; 
  padding: 0 10px; /* 扩大点击区域 */
  position: relative;
}
.tabs li.tab-item.is-active {
  color: black;
  font-weight: 500; /* 激活时加粗突出 */
}
/* 输入框容器，用来承载箭头伪元素 */
.input-wrapper {
  position: relative;
  margin-top: 10px;
  --arrow-left: 0; /* 自定义属性存储箭头位置 */
}
/* 箭头伪元素样式 */
.input-wrapper::before {
  content: '';
  position: absolute;
  top: -8px; /* 调整箭头与输入框的间距 */
  left: var(--arrow-left); /* 动态获取位置 */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #dbdbdb; /* 箭头颜色和边框统一 */
  display: none; /* 默认隐藏 */
}
/* 激活状态下显示箭头 */
.input-wrapper.has-arrow::before {
  display: block;
}
input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  outline: none;
}
input:focus {
  border-color: black;
}

JavaScript（处理点击事件、切换输入框、定位箭头）

const tabItems = document.querySelectorAll('.tab-item');
const inputWrapper = document.querySelector('.input-wrapper');
const inputs = document.querySelectorAll('input');

tabItems.forEach(item => {
  item.addEventListener('click', () => {
    // 重置所有激活状态
    tabItems.forEach(tab => tab.classList.remove('is-active'));
    inputs.forEach(input => input.style.display = 'none');
    
    // 标记当前激活项并显示对应输入框
    item.classList.add('is-active');
    const targetInput = document.getElementById(item.dataset.target);
    targetInput.style.display = 'block';
    targetInput.focus(); // 自动聚焦提升体验
    
    // 计算箭头的精准位置：列表项中心 - 箭头半宽
    const tabRect = item.getBoundingClientRect();
    const wrapperRect = inputWrapper.getBoundingClientRect();
    const arrowLeft = tabRect.left - wrapperRect.left + (tabRect.width / 2) - 8;
    
    // 设置箭头位置并显示
    inputWrapper.classList.add('has-arrow');
    inputWrapper.style.setProperty('--arrow-left', `${arrowLeft}px`);
  });
});

方案优势 #

• 箭头是独立的装饰元素，完全不修改input的结构或形状，不会影响输入框的原生功能
• 可以精准定位到任意列表项的正下方，适配不同宽度的列表项
• 代码结构清晰，后续新增列表项只需要添加对应的li和input即可，扩展性强

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