聚焦时如何更改边框宽度

Question

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

null

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

null

Answer 1

您可以尝试设置contacts-input 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;
}