聚焦时如何更改边框宽度

Question

我想在聚焦时更改边框宽度。 我的输入框有 1px 实心边框。 聚焦时，它会改变 2px 不同颜色的实心边框。 但是有 1px 的差异，所以包含这个输入框的 div 在聚焦时会改变它的宽度 1px。 我想解决这个问题。 我是 html 和 css 的初学者，所以我正在寻找你的帮助。 谢谢。

.contact-input {
  border: 1px solid #707070;
  border-radius: 10px;
  margin-top: 1.5rem;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;
}

.contact-label {
  padding-bottom: 2rem;
}

.contact-input input[type="text"] {
  outline: none;
  border: none;
  border-bottom: 1px solid #707070;
  width: 40%;
}

.contact-input input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid #3AD6B1;
}

<div class="contact-input">
  <div class="contact-label">Name</div>
  <input class="w-50" type="text" placeholder="Your answer">
</div>

Answer 1

添加 1px 的 box-shadow

.contact-input {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
}
.contact-label {
    padding-bottom: 2rem;
}
.contact-input input[type="text"] {
    outline: none;
    border: none;
    border-bottom: 1px solid #707070;
    width: 40%;
}
.contact-input input[type="text"]:focus {
    outline: none;
    box-shadow:0 1px 0 #3AD6B1;
    border-color:#3AD6B1;
}

<div class="contact-input">
    <div class="contact-label">Name</div>
    <input class="w-50" type="text" placeholder="Your answer">
</div>

Answer 2

您可以尝试设置联系人输入 div 的高度以适应增加的边框。

.contact-input {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
    height: 7.5rem;
}