CSS3 :在两个文本框的焦点上显示边框

Question

我有一个 2 个文本框。 当我专注于第一个文本框时。我得到边框，但当我专注于第二个文本框时，我没有得到border-top.我已经border-top:none了第二个文本框，因为第一个文本框的边框底部与第二个文本框的边框顶部混合在一起。

我想只使用 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 ：当我专注于任何文本框时，我应该让文本框周围的边框都是绿色的。

任何帮助都会很棒。

谢谢。

Answer 1

不要隐藏第二个框边框，只需将其放置在第一个框边框下即可。当其中一个框聚焦时，使用outline突出显示它，并将其置于顶部，这样它就不会在另一个框下面：

.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

我认为这是最好的方法：

.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

示例：在 css 中创建form-control:focus并将边框设置为 green 和 outline:none 和 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>