I am trying to make a login form constituted of two input fields with an inset padding, but those two fields always end up exceeding its parent's boundaries; the issue stems from the added inset padding. What could be done in order to rectify this issue?
JSFiddle snippet: http://jsfiddle.net/4x2KP/
N.B.: The code may not be at its cleanest. For instance, the span element that encapsulates the text inputs may not be needed at all.
#mainContainer {_x000D_
line-height: 20px;_x000D_
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;_x000D_
background-color: rgba(0,50,94,0.2);_x000D_
margin: 20px auto;_x000D_
display: table;_x000D_
-moz-border-radius: 15px;_x000D_
border-style: solid;_x000D_
border-color: rgb(40, 40, 40);_x000D_
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;_x000D_
border-radius: 2px;_x000D_
border-radius: 2px 5px / 5px;_x000D_
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);_x000D_
}_x000D_
_x000D_
.loginForm {_x000D_
width: 320px;_x000D_
height: 250px;_x000D_
padding: 10px 15px 25px 15px;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
.login-fields > .login-bottom input#login-button_normal {_x000D_
float: right;_x000D_
padding: 2px 25px;_x000D_
cursor: pointer;_x000D_
margin-left: 10px;_x000D_
}_x000D_
_x000D_
.login-fields > .login-bottom input#login-remember {_x000D_
float: left;_x000D_
margin-right: 3px;_x000D_
}_x000D_
_x000D_
.spacer {_x000D_
padding-bottom: 10px;_x000D_
}_x000D_
_x000D_
/* ELEMENT OF INTEREST HERE! */_x000D_
input[type=text],_x000D_
input[type=password] {_x000D_
width: 100%;_x000D_
height: 20px;_x000D_
padding: 5px 10px;_x000D_
background-color: rgb(215, 215, 215);_x000D_
line-height: 20px;_x000D_
font-size: 12px;_x000D_
color: rgb(136, 136, 136);_x000D_
border-radius: 2px 2px 2px 2px;_x000D_
border: 1px solid rgb(114, 114, 114);_x000D_
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);_x000D_
}_x000D_
_x000D_
input[type=text]:hover,_x000D_
input[type=password]:hover,_x000D_
label:hover ~ input[type=text],_x000D_
label:hover ~ input[type=password] {_x000D_
background:rgb(242, 242, 242) !important;_x000D_
}_x000D_
_x000D_
input[type=submit]:hover {_x000D_
box-shadow:_x000D_
inset 0 1px 0 rgba(255,255,255,0.3),_x000D_
inset 0 -10px 10px rgba(255,255,255,0.1);_x000D_
} <div id="mainContainer">_x000D_
<div id="login" class="loginForm">_x000D_
<div class="login-top">_x000D_
</div>_x000D_
<form class="login-fields" onsubmit="alert('test'); return false;">_x000D_
<div id="login-email" class="login-field">_x000D_
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>_x000D_
<span><input name="email" id="email" type="text"></input></span>_x000D_
</div>_x000D_
<div class="spacer"></div>_x000D_
<div id="login-password" class="login-field">_x000D_
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>_x000D_
<span><input name="password" id="password" type="password"></input></span>_x000D_
</div>_x000D_
<div class="login-bottom">_x000D_
<input type="checkbox" name="remember" id="login-remember"></input>_x000D_
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>_x000D_
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>_x000D_
</div>_x000D_
</form>_x000D_
</div>_x000D_
</div>Padding is added to the overall width. Because your container has a pixel width, you are better off giving the inputs a pixel width too, but remember to remove the padding and border from the width you set to avoid the same issue.
You also have an error in your css with the exclamation point in this line:
background:rgb(242, 242, 242);!important;
remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.
If all above fail, try setting the following properties for your input, to have it take max space but not overflow:
input {
min-width: 100%;
max-width: 100%;
}
Try changing the box-sizing to border-box. The padding is adding to width of your input elements.
CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
I tried these solutions but never got a conclusive result. In the end I used proper semantic markup with a fieldset. It saved having to add any width calculations and any box-sizing.
It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges.
In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other.
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>
Padding is essentially added to the width, therefore when you say width:100% and padding: 5px 10px you're actually adding 20px to the 100% width.
The other answers seem to tell you to hard-code the width or use a browser-specific hack. I think there is a simpler way.
By calculating the width and subtracting the padding (which causes the field overlap). The 20px comes from 10px for left padding and 10px for right padding.
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
Do you want the input fields to be centered? A trick to center elements: specify the width of the element and set the margin to auto, eg:
margin : 0px auto;
width:300px
A link to your updated fiddle:
Source: Stackoverflow.com