能否避免HTML元素的opacity属性影响TAB键聚焦指示器的透明度？

你提到的自创术语「tab helpers」表述清晰，可理解为使用Tab键导航时浏览器触发的原生焦点指示控件，没有表述不当的问题。

你遇到的现象是CSS规范的标准表现，不是浏览器的差异化实现。opacity属性的规则是：当元素的opacity值小于1时，该元素会被作为一个整体进行透明度合成，其所有后代元素（包括浏览器自动生成的默认焦点轮廓）都会继承该透明度效果，无法通过子元素的样式单独覆盖。

针对你的需求，有两种成熟的解决方案： #

方案1：替换父元素opacity实现（最优解） #

如果你只是需要父元素本身的视觉元素（背景、文字、边框等）半透明，完全不需要设置父元素的opacity属性，改用带alpha通道的颜色值实现半透明即可，该方案不会影响子元素的透明度，原生焦点框会保持100%不透明。
代码示例：

/* 原来的 .checkbox2 { opacity: 20%; } 替换为以下内容 */
.checkbox2 {
  background-color: rgba(255, 255, 255, 0.2); /* 按需替换为实际使用的背景色，最后一位为透明度 */
  color: rgba(0, 0, 0, 0.2); /* 按需调整文字透明度 */
  border-color: rgba(0, 0, 0, 0.2); /* 如有边框则按需调整 */
  /* 其他原有样式保留 */
}

/* 如果需要复选框本身平时保持半透明，可单独设置 */
.checkbox2 input {
  opacity: 0.2;
}
/* 聚焦时自动恢复复选框全显，符合交互习惯 */
.checkbox2 input:focus {
  opacity: 1;
}

方案2：父元素必须设置opacity时的兼容方案 #

如果业务逻辑要求父元素必须设置opacity属性，可以通过JS自定义焦点框的方式实现，把焦点框元素挂载到页面根节点下，脱离半透明父容器的影响：

1. 先关闭input的默认焦点轮廓

#myCheck2:focus {
  outline: none;
}

2. 添加JS逻辑实现自定义焦点框

const targetInput = document.querySelector('#myCheck2')
// 创建全局焦点框元素
const customFocusRing = document.createElement('div')
customFocusRing.style.cssText = `
  position: absolute;
  display: none;
  outline: auto 2px -webkit-focus-ring-color; /* 和原生焦点框样式一致 */
  pointer-events: none;
  z-index: 99999;
`
document.body.appendChild(customFocusRing)

// 监听聚焦事件显示并定位焦点框
targetInput.addEventListener('focus', () => {
  const rect = targetInput.getBoundingClientRect()
  customFocusRing.style.left = `${rect.left + window.scrollX}px`
  customFocusRing.style.top = `${rect.top + window.scrollY}px`
  customFocusRing.style.width = `${rect.width}px`
  customFocusRing.style.height = `${rect.height}px`
  customFocusRing.style.display = 'block'
})

// 监听失焦事件隐藏焦点框
targetInput.addEventListener('blur', () => {
  customFocusRing.style.display = 'none'
})

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