CSS，input获得焦点后，父级div加边框的问题

cqwcns

自己写了一个带图标的input组件，效果是这样的：


原理就是div包裹一个svg和一个input，具体代码是这样的：

[HTML] 纯文本查看 复制代码

 <!-- 用户名 -->
            <div
              class="flex items-center w-full px-4 py-2 border rounded-md space-x-5"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-gray-500"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                  clip-rule="evenodd"
                />
              </svg>
              <input
                class="flex-1 text-black text-lg bg-transparent outline-none border-none"
                type="text"
              />
            </div>

有两个问题：
1、我希望再input获得焦点时，父级div的边框变成蓝色。
2、用户点击整个div时（包括点击图标），input自动获得焦点。想到的是div加一个点击事件，事件方法给input焦点，但每个input组件加一个事件，这很不科学。


所以，请教第1个问题如何实现？第2个问题更好的方法是怎样做？谢谢

renxianyang

1、https://caniuse.com/?search=focus-within
2、第二个可以修改布局；图标用定位，然后pointer-events:none

zhzhch335

第一个问题
获得onFocus的FocusEvent对象 从e.path中寻找父元素进行样式的修改
第二个问题
给要加事件的父元素统一的class 通过class选择到所有父元素 然后遍历添加事件

cqwcns

用了二楼的方法，已实现。
谢谢两位朋友。

我家有条大大狗

获取焦点让父div边框变色的问题，你在评论里找就是了，都差不多
点击div让input自动聚焦，这个不需要写脚本，有个简单的法子，你用label标签代替div就好

我家有条大大狗

我家有条大大狗 发表于 2022-4-7 14:11
获取焦点让父div边框变色的问题，你在评论里找就是了，都差不多
点击div让input自动聚焦，这个不需要写脚 ...

兼容性极佳，虽然不太符合语义化

我家有条大大狗

另外，其实不是很建议你给父元素加边框，逻辑有点倒置，不太符合html的自然习惯。
你可以换个思路，将svg改为背景，input 占据整个父元素宽度，设置input的左侧内边距，为svg图标预留空间即可。
剩下的就是input聚焦时的样式变化而已

我家有条大大狗

我家有条大大狗 发表于 2022-4-7 14:12
兼容性极佳，虽然不太符合语义化

不过用法是符合标准的

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。