HTML && CSS Input Border Movement

Question

I have a problem. I am making a register form in HTML and CSS. I putted a border on focus of the input (once you click, border around input appears), but then another inputs start moving around. How can I fix that movements? Here's my code:

input {
  width: 450px;
  height: 3.5vh;
  margin-bottom: 1rem;
  outline: none;
  color: white;
  border: 1px solid rgba(170, 170, 170, 0.3);
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  border-radius: 3px;
}

input:focus {
  border: 2px solid blueviolet;
  outline: none!important;
}

<div class="inputs">
  <input type="text" placeholder="User Name" name="name">
</div>
<div class="inputs">
  <input type="email" placeholder="Email" name="email">
</div>
<div class="inputs">
  <input type="password" placeholder="Password" name="password">
</div>
<div class="inputs">
  <input type="password" placeholder="Confirm Password" name="confirmit">
</div>
<span class="img-text">Choose avatar: </span>
<input type="file" id="img" accept="image/*" style="border: none!important; background: none!important;">
<button class="register" type="submit" name="register">Register</button>

I would really appreciate help.

This is because you're increasing the border size on focus so it will look as if things are moving. You could set your border to 1px on input:focus and it will fix the issue. You could also set an outline of transparent 2px on the input, then on focus set the outline to 2px solid. — Xoog
– Xoog, Commented Oct 15, 2020 at 10:38

Derek Wang · Accepted Answer · 2020-10-15 10:42:42Z

On default input style, you have set border-width to 1px.

But when focused, you have set the border-width to 2px. Due to this increment, the input width and height are increased when the focus.

So it is needed to set the border-width same on default & focused as follows.

In the below snippet, I have set the default input style border-width to 2px so same as focused input.

input {
  width: 450px;
  height: 3.5vh;
  margin-bottom: 1rem;
  outline: none;
  color: white;
  border: 2px solid rgba(170, 170, 170, 0.3);
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  border-radius: 3px;
}

input:focus {
  border: 2px solid blueviolet;
  outline: none!important;
}

<div class="inputs">
  <input type="text" placeholder="User Name" name="name">
</div>
<div class="inputs">
  <input type="email" placeholder="Email" name="email">
</div>
<div class="inputs">
  <input type="password" placeholder="Password" name="password">
</div>
<div class="inputs">
  <input type="password" placeholder="Confirm Password" name="confirmit">
</div>
<span class="img-text">Choose avatar: </span>
<input type="file" id="img" accept="image/*" style="border: none!important; background: none!important;">
<button class="register" type="submit" name="register">Register</button>

Lalit Joshi · Accepted Answer · 2020-10-15 10:45:43Z

2

This is happening because you are adding a border on focus but initially, there is no border present in the input tag that is the reason you are facing fluctuations in the UI.

To fix that add border property in the input as well with the transparency.

input {
    width: 450px;
    height: 3.5vh;
    margin-bottom: 1rem;
    outline: none;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    border-radius: 3px;
    border: solid 2px transparent;
}

edited Oct 15, 2020 at 10:45

answered Oct 15, 2020 at 10:42

Lalit Joshi

664 bronze badges

1 Comment

Lalit Joshi Over a year ago

Correct there should be an only a single border.

dantheman · Accepted Answer · 2020-10-15 13:32:23Z

If you want to have increasing border widths, then you could use an inset box shadow instead.

Also it's good practice to add * { box-sizing: border-box } to avoid issues like this.

* {
  box-sizing: border-box;
}

input {
  width: 450px;
  height: 3.5vh;
  margin-bottom: 1rem;
  outline: none;
  color: white;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(170, 170, 170, 0.3);
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  border-radius: 3px;
  min-height: 40px;
  padding-left: 10px;
}

input:focus {
  box-shadow: inset 0 0 0 2px blueviolet;
  outline: none!important;
}

<div class="inputs">
  <input type="text" placeholder="User Name" name="name">
</div>
<div class="inputs">
  <input type="email" placeholder="Email" name="email">
</div>
<div class="inputs">
  <input type="password" placeholder="Password" name="password">
</div>
<div class="inputs">
  <input type="password" placeholder="Confirm Password" name="confirmit">
</div>
<span class="img-text">Choose avatar: </span>
<input type="file" id="img" accept="image/*" style="border: none!important; background: none!important;">
<button class="register" type="submit" name="register">Register</button>

Rafee Shaik · Accepted Answer · 2020-10-15 11:23:10Z

0

input {
  width: 450px;
  height: 3.5vh;
  margin-bottom: 1rem;
  outline: none;
  color: white;
  border: 1px solid rgba(170, 170, 170, 0.3);
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  border-radius: 3px;
  border: 2px solid transparent; /* input has border 2px when it has focus that's why here border 2px */
}

input:focus {
  border: 2px solid blueviolet;
  outline: none!important;
}

answered Oct 15, 2020 at 11:23

Rafee Shaik

6694 silver badges10 bronze badges

Comments

Shivam malviya · Accepted Answer · 2020-10-15 11:39:16Z

0

i went through your code, default border size is 1px and when it's focused, you made the border size 2px that's why other input are moving around.

/*either change input initial border size to 2px like/*
 input {
      width: 450px;
      height: 3.5vh;
      margin-bottom: 1rem;
      outline: none;
      color: white;
      border: 2px solid rgba(170, 170, 170, 0.3);
      background: rgba(0, 0, 0, 0.5);
      font-family: 'Poppins', sans-serif;
      font-weight: bold;
      border-radius: 3px;
    }
    /* or change focused input border size to 1px like/*
    input:focus {
      border: 1px solid blueviolet;
      outline: none!important;
    }

answered Oct 15, 2020 at 11:39

Shivam malviya

12 bronze badges

Collectives™ on Stack Overflow

HTML && CSS Input Border Movement

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related