I'm currently dealing with a form that includes input fields for email and password, along with some additional buttons.
Here is the HTML code:
<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>
My goal is to ensure that both the input fields and buttons span 100% of the parent's width 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;
}
However, I encountered an issue where the input fields extend beyond the boundaries of the parent div, as shown in this image:
https://i.sstatic.net/R9L0T.jpg
You can also view a demo on Codepen.
How can I ensure that the input fields remain within the parent div, maintain a width of 100%, and still include padding?