skip over readonly textboxes [duplicate]

Question

I am using CSS to make two checkboxes look like one...

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;
}

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

The problem is that when a user tabs through the textboxes, he tabs over the readonly one, which is not supposed to be focusable. How can I make it so that the readonly textbox is not focused on, and the focus skips to the next textbox? Fiddle

Answer 1

Set the tabIndex

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