Box-sizing border-box doesn't work as needed - html

Question

Code: https://codepen.io/sshiling/pen/LqxLJg
In the first case, border-box works as needed.
In the second case, it doesn't and my input fields drop out of the form.
When I remove padding for input fields they don't drop out.
But I need padding for each of them.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password?</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>

Answer 1

input with type search is getting the box-sizing: border-box by default, while other types don't. You have to specify the border box for other types.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password?</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>

Answer 2

use this
* {
box-sizing: border-box;
}

Answer 3

You should give box-sizing style to modal-login__email and modal-login__password instead of modal-login__form
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}

Answer 4

Try this one I think this is use full for you first of all for you should have to give the height: auto; to .modal-login__form class your content will be not overflowing from the section and for box-sizing: border-box; its working in .modal-login__form class if you want to cover the email and password input you have to give the box-sizing: border-box; to .modal-login__email and .modal-login__password
class.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: auto;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required> </p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>

Answer 5

But why it so? In the first case, it works without border-box for input field and in the second case, it doesn't.
Because In the first case,The type of input box is search.Different types of input boxes result in