Как установить tabindex в -1 через CSS?

function toggleDisable() {
  const container = document.querySelector('#container');
  const inputs = container.querySelectorAll('input');

  if (container.classList.contains('disable')) {
    container.classList.remove('disable');
    inputs.forEach((input) => {
      input.disabled = false;   
    });
  } else {
    container.classList.add('disable');
    inputs.forEach((input) => {
      input.disabled = true;
    });
  }
}

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

<h4>Container for comparison:</h4>
<div id = "different-container">
  <input id = "input-a" type = "text" name = "input-a" tabindex = "1">
  <input id = "input-b" type = "text" name = "input-b" tabindex = "2">
</div>

<h4>Container we want to disable inputs in:</h4>
<div id = "container">
  <input id = "input-a" type = "text" name = "input-a" tabindex = "3">
  <input id = "input-b" type = "text" name = "input-b" tabindex = "4">
</div>

<h4>Container for comparison:</h4>
<div id = "different-container2">
  <input id = "input-a" type = "text" name = "input-a" tabindex = "5">
  <input id = "input-b" type = "text" name = "input-b" tabindex = "6">
</div>

<h4>Use button to disable/enable the targeted container's inputs:</h4>
<div>
  <button onclick = "toggleDisable()">Toggle Disable</button>
</div>

function toggleDisable() {
  const inputs = document.querySelectorAll('#container input');

  inputs.forEach((input) => {
    input.disabled = !input.disabled;
  });
}

#container input:disabled {
  opacity: 0.5;
  background-color: red;
  border: 4px solid blue
}

<h4>Container for comparison:</h4>
    <div id = "different-container">
      <input id = "input-a" type = "text" name = "input-a" tabindex = "1">
      <input id = "input-b" type = "text" name = "input-b" tabindex = "2">
    </div>

    <h4>Container we want to disable inputs in:</h4>
    <div id = "container">
      <input id = "input-a" type = "text" name = "input-a" tabindex = "3">
      <input id = "input-b" type = "text" name = "input-b" tabindex = "4">
    </div>

    <h4>Container for comparison:</h4>
    <div id = "different-container2">
      <input id = "input-a" type = "text" name = "input-a" tabindex = "5">
      <input id = "input-b" type = "text" name = "input-b" tabindex = "6">
    </div>

    <h4>Use button to disable/enable the targeted container's inputs:</h4>
    <div>
      <button onclick = "toggleDisable()">Toggle Disable</button>
    </div>

.container.disabled>input:focus {
  display: contents;
  /* KILLS the focus */
}

div,
p {
  margin: 0.5em;
  padding: 0.5em;
  border: solid;
  background: white;
}

.disabled {
  color: red;
  background: silver;
}

kbd {
  border: 1px solid;
  background: silver;
  border-radius: 3px;
  padding: 2px 6px;
}

h1 {
  font-size: 16px;
  color: red;
  text-align: center;
}

h1::first-line {
  color: black;
  font-size: 1.8em;
  text-transform: uppercase;
}

html {
  display: grid;
  min-height: 100vh;
  place-content: center;
  background: white;
}

body {
  background: #bee;
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0.25em 0.25em 0.5em;
}

* {
  box-sizing: border-box;
}

<h1>test to disable inputs<br> even reached via tabindex</h1>
<!-- display:contents destroys the container at screen and kills input -->

<p>
  <a tabindex = "0">Click 'N select some of this text and <kbd>tab</kbd> through inputs.</a>
</p>
<p>Unclickable inputs , no attribute nor pointer-events used .</p>
<div class = "container disabled">
  <input id = "input-a" type = "text" name = "input-a" tabindex = "0" value = "text not to modify">
  <input id = "input-b" type = "text" name = "input-b" tabindex = "0" value = "text not to modify">
</div>
<div class = "container">
  <input id = "input-c" type = "text" name = "input-c" tabindex = "0" value = "text to modify">
  <input id = "input-d" type = "text" name = "input-d" tabindex = "0" value = "text to modify">
</div>