CODEWITHSUNDEEP
htmlcssstyling
ApexCoding
ApexCoding

Reputation: 13

HTML && CSS Input Border Movement

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.

Upvotes: 1

Views: 1033

Answers (5)

dantheman
dantheman

Reputation: 3814

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>

Upvotes: 1

Shivam malviya
Shivam malviya

Reputation: 1

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

Upvotes: 0

Rafee Shaik
Rafee Shaik

Reputation: 679

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

Upvotes: 0

Lalit Joshi
Lalit Joshi

Reputation: 66

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

Upvotes: 2

Derek Wang
Derek Wang

Reputation: 10194

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>

Upvotes: 2

Related Questions