聚焦时如何更改边框宽度

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 的框阴影

.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;
}

聚焦时如何更改边框宽度

How to change border width when focused

html

javascript

css

input

border