I want to change border width when focused. My input box has 1px solid border. When focused, It changes 2px different color solid border. But there is 1px difference, so the div contains this input box changes its width 1px when focus. I want to solve this problem. I am a beginner in html and css so I am looking for your help. Thank you.

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

I want to change border width when focused. My input box has 1px solid border. When focused, It changes 2px different color solid border. But there is 1px difference, so the div contains this input box changes its width 1px when focus. I want to solve this problem. I am a beginner in html and css so I am looking for your help. Thank you.

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

• javascript
• html
• css
• input
• border

• 1 add an outline of 1px ? or a box-shadow? – Temani Afif Commented Dec 26, 2020 at 8:08
• 1 use the :hover method – Aadit S. Bagga Commented Dec 26, 2020 at 8:08
• 1 share some of your code so that the others can help you. – Prime Commented Dec 26, 2020 at 8:14
• I edited my question by adding codes. – Kimura Shinji Commented Dec 26, 2020 at 8:22

2 Answers 2

add 1px of 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>

You can try setting the height of the contacts-input div to acmodate the increased border.

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