如何对多个相同选择器应用:focus伪类 解决输入框聚焦样式不统一问题

问题原因 #

CSS 相邻兄弟选择器 + 仅能选中元素后方紧邻的同级节点，无法匹配位于元素前方的同级节点，因此你原有的 .form-control:focus + span 规则只能命中 input 右侧的 Kg 标签，左侧的 Peso 标签位于 input 之前，自然不会被该规则匹配。

解决方案 #

方案1：使用 CSS :has() 选择器（推荐，主流浏览器均已支持）

直接通过父容器判断内部 input 是否聚焦，选中所有子级标签元素，修改你的 CSS 规则即可：

/* 原有input聚焦样式保留 */
.form-control:focus {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border-width: 0px 0px 2px 0px !important;
}
/* 新增父容器判断规则，匹配所有前后标签 */
.input-group:has(.form-control:focus) .input-group-text {
    color: #00a1ff;
    border-color: #00a1ff !important;
    border-width: 0px 0px 2px 0px !important;
}

方案2：JS 兼容方案（适配不支持 :has() 的旧浏览器）

先添加一段监听脚本：

const numInput = document.querySelector('input.form-control[type="number"]');
const groupWrap = numInput.closest('.input-group');
// 聚焦时给父容器加标记类
numInput.addEventListener('focus', () => groupWrap.classList.add('focus-active'));
// 失焦时移除标记类
numInput.addEventListener('blur', () => groupWrap.classList.remove('focus-active'));

再添加对应的 CSS 规则：

.input-group.focus-active .input-group-text {
    color: #00a1ff;
    border-color: #00a1ff !important;
    border-width: 0px 0px 2px 0px !important;
}

两种方案都可以实现 input 聚焦时，左右两侧的标签同步修改下边框颜色的效果。

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