跳过只读文本框

Question

我正在使用CSS使两个复选框看起来像一个......

＆＃13;

＆＃13;

input {
  font-family: serif;
  font-size: 1.3em;
  background: rgba(5, 1, 0, .7);
  /* Really good color!! */
  color: white;
}
.one {
  border: 1px solid black;
  border-radius: 3px 0px 0px 3px;
  border-right: none;
  width: 58px;
  padding: 14px;
  transition: all .7s ease-in;
}
.two {
  border: 1px solid black;
  border-radius: 0px 3px 3px 0px;
  text-decoration: none;
  border-left: none;
  width: 100px;
  text-align: right;
  padding: 14px;
  transition: all .7s ease;
}
input:focus {
  border: 1px solid black;
  box-shadow: 0px 0px 0px white;
  outline: none;
}
.one:focus {
  border-right: none;
}
.two:focus {
  border-left: none;
  width: 100px;
}

＆＃13;

<input type="text">
<br>
<br>
<input type="text" class="one" value="Name:" readonly>
<input type="text" class="two" placeholder="John Doe">
<br>
<br>

＆＃13;

＆＃13;

＆＃13;

问题在于，当用户通过文本框进行选项卡时，他会选中readonly一个，这不应该是可聚焦的。如何才能使readonly文本框不关注，焦点跳到下一个文本框？ Fiddle

Answer 1

设置tabIndex

<input type="text" class="one" tabIndex="-1" value="Name:" readonly>