Add padding to form input without changing the form size

Question

I'm trying to edit the form text padding without changing the form size (to match the placeholder). Every time I change the padding it adds the form's length.

.form-wrapper {
  display:flex;
  justify-content: center;
  flex-direction: column;
  margin: 1em 6em;
}
form {
  width:100%;
  margin: 1em 0;
}
.email-input input{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
}
.password-input input{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
input {
    width:100%;
    height: 50px;
    border:solid 1px #ccc;
    font-size:18px;
}
input::placeholder {
    color: #ccc;
    font-size:18px;
    padding-left:25px;
}

<form>
  <div className="input-field email-input">
    <input id="email" type="text" className="validate" placeholder="Enter Your Email Adress"/>
  </div>
  <div className="input-field password-input">
    <input id="password" type="text" className="validate" placeholder="Enter Your Password"/>
  </div>
</form>

Adding something as :

input {
    padding-left: 25px;
}

Increases the form length which is undesirable. Is this something I have to end up hacking through to make work?

you can add `box-sizing: border-box;` – Jibin Mathews May 20 '19 at 06:30 — Jibin Mathews, May 20 '19 at 06:30

caramba · Accepted Answer · 2019-05-21T05:48:14.163

2

You may want to use CCS box-sizing

That will include the border and padding to the elements width

* { 
  box-sizing: border-box;
}

be careful with the * you can also add box-sizing: border-box; to only the elements needed.

edited May 21 '19 at 05:48

answered May 20 '19 at 06:31

caramba

21,963
19
86
127

score 0 · Answer 2 · answered May 20 '19 at 06:38

0

Add *{box-sizing: border-box;} for global css it will not increase the padding outside the

answered May 20 '19 at 06:38

ritesh

1

outside the what? did you forget to write the rest of your answer? – morgan121 May 20 '19 at 06:45

score 0 · Answer 3 · answered May 20 '19 at 06:42

An alternative to box-sizing: border-box; might be toe substract the padding from width, something like this:

.form-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1em 6em;
}

form {
  width: 100%;
  margin: 1em 0;
}

.email-input input {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none;
}

.password-input input {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

input {
  width: calc(100% - 25px);
  height: 50px;
  border: solid 1px #ccc;
  font-size: 18px;
  padding-left: 25px;
}

input::placeholder {
  color: #ccc;
  font-size: 18px;
  padding-left: 25px;
}

<form>
  <div className="input-field email-input">
    <input id="email" type="text" className="validate" placeholder="Enter Your Email Adress" />
  </div>
  <div className="input-field password-input">
    <input id="password" type="text" className="validate" placeholder="Enter Your Password" />
  </div>
</form>

Add padding to form input without changing the form size

3 Answers3