Html 如何使用tab键使切换按钮可聚焦

我在angular4环境中使用它，因此害怕使用jquery，以下是我的HTML和CSS：

<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
   <div class="row"> <input type="text"></div>
   <div  class="row"> <label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>



    .row{
  padding:15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.行{
填充：15px；
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}

下面是此代码工作的URL：

在切换之前，我有一些输入，所有输入都可以使用tab键选择，但切换按钮被跳过

对焦后，我需要在箭头上移动此切换，按active/deactivate

---

或者如何使用键盘选择复选框

在不了解HTML结构的情况下，很难告诉您如何解决它，但您可以在输入中添加一个

tabindex

属性，让浏览器知道在进行tab操作时，应该以何种顺序访问它们。例如：

---

这将迫使浏览器不跳过其中一个。

如果不了解HTML结构的更多信息，很难告诉您如何解决它，但您可以在输入中添加一个

tabindex

属性，使浏览器知道在进行tab操作时应以何种顺序访问它们。例如：

---

这将强制浏览器不跳过其中一个。

更新：
虽然您的主要问题已得到回答，现在您的问题过于宽泛，但以下是更新问题的解决方案：

HTML:

<div class="row"> <input #input1 (keydown)="input2.focus()" type="text"></div>
<div class="row"> <input #input2 (keydown)="input3.focus()" type="text"></div>
<div class="row"> <input #input3 (keydown)="input4.focus()" type="text"></div>
<div class="row"> <label class="switch">
  <input type="checkbox" #input4 (keydown)="input5.focus()" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input #input5 (keydown)="input6.focus()" type="text"></div>
<div class="row"> <input #input6 (keydown)="input7.focus()" type="text"></div>
<div class="row"> <input #input7  type="text"></div>

因为是

输入

标记可以获得焦点，并在聚焦时设置其他颜色以高亮显示焦点：

input:focus + .slider {
   background-color:red;
   ...
}

---

更新：
虽然您的主要问题已得到回答，现在您的问题过于宽泛，但以下是更新问题的解决方案：

HTML:

<div class="row"> <input #input1 (keydown)="input2.focus()" type="text"></div>
<div class="row"> <input #input2 (keydown)="input3.focus()" type="text"></div>
<div class="row"> <input #input3 (keydown)="input4.focus()" type="text"></div>
<div class="row"> <label class="switch">
  <input type="checkbox" #input4 (keydown)="input5.focus()" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input #input5 (keydown)="input6.focus()" type="text"></div>
<div class="row"> <input #input6 (keydown)="input7.focus()" type="text"></div>
<div class="row"> <input #input7  type="text"></div>

因为是

输入

标记可以获得焦点，并在聚焦时设置其他颜色以高亮显示焦点：

input:focus + .slider {
   background-color:red;
   ...
}

尝试在以下两个方面设置

tabindex=“0”

：输入和跨度：

它对我很有效

尝试在输入和span:

---

它适合我

请提供组件的完整html代码。如果看不到完整的图片，就很难理解您的问题。请提供组件的完整html代码。在看不到完整图片的情况下很难理解您的问题箭头键应该切换箭头键它不在这个问题范围内，对吗？箭头键应该切换箭头键它不在这个问题范围内，对吗？