如何通过CSS将tabindex设为-1以彻底禁用输入框？

我有一个包含多个输入框的容器：

<div class="container">
  <input id="input-a" type="text" name="input-a" tabindex="0">
  <input id="input-b" type="text" name="input-b" tabindex="0">
</div>

特定场景下，我会给这个容器添加.disable类来禁用它：

.disable {
    pointer-events: none;
    opacity: .15;
}

这种方式能阻止鼠标操作输入框，但用户仍可通过Tab键切换到这些字段。我尝试在.disable类中添加tab-index: -1（也试过无连字符的tabindex），但Firefox开发者工具提示“Invalid property name”。想问下有没有办法通过CSS彻底禁用这些输入框，确保它们完全无法被访问？

问题根源 #

tabindex是HTML属性，并非CSS属性，所以你在CSS中设置它会被判定为无效属性，这就是浏览器报错的原因。仅靠CSS无法直接修改HTML的tabindex值，要彻底禁用输入框，需要结合视觉样式、交互限制和无障碍处理来实现。

可行方案 #

1. 纯CSS优化（尽可能限制访问）

虽然无法完全阻止Tab键聚焦，但可以通过以下样式让输入框即使被聚焦也无法交互，同时提升无障碍性：

.disable {
    pointer-events: none;
    opacity: .15;
}
.disable input {
    /* 隐藏焦点样式，避免误导用户 */
    outline: none;
    /* 禁止文本选中 */
    user-select: none;
    /* 显示禁用状态光标 */
    cursor: not-allowed;
}

同时给容器添加aria-disabled="true"属性，让屏幕阅读器识别为禁用状态：

<div class="container disable" aria-disabled="true">
  <!-- 输入框内容 -->
</div>

2. 结合JavaScript彻底解决（推荐）

如果要完全阻止Tab键访问，必须修改输入框的HTML属性。在给容器添加.disable类的同时，用JS批量处理子输入框：

const container = document.querySelector('.container');
container.classList.add('disable');
// 给所有输入框添加禁用属性和负tabindex
container.querySelectorAll('input').forEach(input => {
    input.disabled = true;
    input.setAttribute('tabindex', '-1');
});

这样既保留了CSS的视觉禁用效果，又通过disabled属性彻底禁止输入框交互，tabindex="-1"也能阻止Tab键聚焦。

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