我想在聚焦时改变边框宽度。我的输入框有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
您可以尝试设置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;
}