Kakar Kakar - 7 months ago 22
HTML Question

Input type to have width of 100% and be inside parent div

I have a form with input for an email and password and some other buttons.

html:

<div id="login-form">
<form>
<input type="email" placeholder="Email" id="email" name="email_phone">
<br>
<input type="password" placeholder="Password" id="password" name="password">
<br>
<button id="login-submit">Submit</button>
<br>
<button id="login-forgot">Forgot Password</button>
</form>
<br>
<br>
<center>
<p>Don't have an account?</p>
</center>
<button id="create-new-account">Create Account Now</button>
</div>


I need the input and buttons to be 100% width of the parent. And have a padding of 10px.

#login-form input[type=email], #login-form input[type=password] {
width: 100%;
font-size: 14pt;
border: none;
outline: none;
padding: 10px;
}

#login-form button {
width: 100%;
border: none;
color: white;
font-size: 14pt;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
cursor: pointer;
}


Then the problem starts with the input width. All the buttons are inside the parent element, but the input box cross the parent div. Like this:

enter image description here

demo at Codepen.

How do I keep the input box inside the parent div and have a width of 100% and still have padding?

Answer

The problem is with the input paddings. To fix it add box-sizing property to your input fields:

box-sizing: border-box;

I just tested it in your codepen, seems like the result you want.