textbox

by Yaakov Ainspan

HTML

<input type="text"><br> Type some text into the first text box, then tab to the next one.<br>
<input type="text" class="one" value="Name:" readonly disabled><input type="text" class="two" placeholder="John Doe" ><br><br>
   You see how the <span style="font-family:monospace">readonly</span> text box is focused on. How can I make it skip to the third one, without focusing on the second one?

CSS

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