Question

我有两个文本框。当我专注于第一个文本框。我得到了边框但是当我专注于第二个文本框时，我没有得到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

我认为这是最好的方式：

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 2

示例：在css中创建form-control:focus并将边框设置为green和outline:none以及z-index:1

＆＃13;

.form-control{
  padding:6px 12px;
  border:thin black solid;
}


.form-control:focus {
padding:6px 12px;
border:thin green solid;
outline:none;
z-index:1;
}

＆＃13;

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

＆＃13;

Answer 3

不要隐藏第二个框边框，只需将它放在第一个框下。当其中一个框被聚焦时，使用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>

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

3 个答案: