点击输入框图标时选中对应输入框的技术方案求助

方案一：CSS pointer-events: none（优先推荐） #

直接给图标图片添加pointer-events: none属性，让图片不再拦截鼠标点击事件，点击图标区域时，事件会穿透到下方的输入框，自动触发聚焦。

修改你的CSS中.contact-input-group img的样式：

.contact-input-group img {
    filter: brightness(0) invert(1);
    transition: all ease-in-out 200ms;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1rem;
    pointer-events: none; /* 新增这一行 */
}

这个纯CSS方案完全适配你的需求，不需要改动HTML结构，也不会影响你对图标的其他CSS操作（比如滤镜、过渡动画）。

方案二：JavaScript 手动触发聚焦（备选） #

如果因为特殊场景不能使用pointer-events，可以用JS监听图标点击事件，手动聚焦对应输入框：

在HTML页面末尾添加这段代码：

document.querySelectorAll('.contact-input-group img').forEach(img => {
    img.addEventListener('click', function() {
        // 定位当前组内的输入框/文本域
        const input = this.parentElement.querySelector('input, textarea');
        if (input) input.focus();
    });
});

点击图标时，这段代码会自动找到同组的输入框并触发聚焦。

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