CSS3 : show border on focus to the both textbox - html

Question

I have a 2 text boxes. when I focus on 1st textbox. I get border but when I focus on 2nd textbox I don't get border-top. I have given border-top:none to the 2nd textbox as 1st textbox's border-bottom mixes with the 2nd textbox border-top.
I want to solve this issue using only CSS3.
.form-control{
padding:6px 12px;
border:thin black solid;
}
.form-control:focus{
border:thin green solid;
}
.add_url .form-control{
padding:6px 12px;
border:thin black solid;
border-top:none;
}
.add_url .form-control:focus{
border:thin green solid;
border-top:none;
}
<input type="text" class="form-control" placeholder="enter url 1">
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 2">
</div>
PS : When I focus on any of the text box , I should get border to be green to all around the textbox.
Any help would be great.
Thank you.

Answer 1

Don't hide the 2nd box border, just position it under the 1st. When one of the boxes is focused use the outline to highlight it, and bring it to the top, so it won't be under the other box:
.form-control {
position: relative;
padding: 6px 12px;
border: thin black solid;
}
.form-control:focus {
border: thin green solid;
}
.add_url .form-control {
top: -1px;
padding: 6px 12px;
border: thin black solid;
}
.form-control:focus {
outline: 1px green solid;
outline-offset: -1px;
z-index: 1;
}
<input type="text" class="form-control" placeholder="enter url 1">
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 2">
</div>

Answer 2

i think this is the best way :
HTML :
<input type="text" placeholder="enter url 1">
<div class="add_url">
<input type="text" placeholder="enter url 2">
</div>
CSS :
input {
padding:6px 12px;
border:2px black solid;
outline: 0;
position: relative;
z-index: 0;
}
input:focus{
border:2px green solid;
z-index: 1;
}
.add_url input { margin-top: -2px; }

Answer 3

Example: Create an form-control:focus in css and set the border as green and outline:none and z-index:1
.form-control{
padding:6px 12px;
border:thin black solid;
}
.form-control:focus {
padding:6px 12px;
border:thin green solid;
outline:none;
z-index:1;
}
<div class="add_url">
<input type="text" class="form-control" placeholder="enter url 1">
<input type="text" class="form-control" placeholder="enter url 2">
</div>