Skip read-only text fields
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 the user inserts text boxes, he clicks on readonly
one that shouldn't be focusable. How can I do this so that the textbox is readonly
not focused and the focus goes to the next textbox? Fiddle
+3
source to share