Skip to content

Instantly share code, notes, and snippets.

@tamr

tamr/input-block-level-with-add-ons.html

Created July 2, 2013 23:09
Show Gist options
  • Save tamr/5914045 to your computer and use it in GitHub Desktop.
Save tamr/5914045 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
input-block-level-with-add-ons.html
<html>
<head></head>
<body>
<section id="main" class="mc-login-inner container" style="height: 100%">
<h2>Original Solution</h2>
<p>Found on <a href="http://jsfiddle.net/EP83X/22/">http://jsfiddle.net/EP83X/22/</a></p>
<form>
<div class="row">
<div class="offset4 span4">
<div class="input-prepend">
<span class="add-on mc-add-on"><i class="icon-user"></i></span>
<input class="mc-input input-block-level" type="text" id="iUser" placeholder="Username">
</div>
<div class="input-prepend">
<span class="add-on mc-add-on"><i class="icon-lock"></i></span>
<input class="mc-input input-block-level" type="text" id="iPassword" placeholder="Password">
</div>
<input type="button" value="Login" class="btn btn-block" />
</div>
</div>
</form>
</section>
<section>
<h2>Better Solution</h2>
<form>
<div class="row">
<div class="offset4 span4">
<div class="input-prepend input-block-level">
<span class="add-on"><i class="icon-user"></i></span>
<input class="" type="text" id="iUser" placeholder="Username">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input class="" type="text" id="iPassword" placeholder="Password">
</div>
<input type="button" value="Login" class="btn btn-block" />
</div>
</div>
</form>
</section>
</body>
</html>
Raw
style-better.css
.input-prepend.input-block-level {
display: table;
width: 100%;
}
.input-prepend.input-block-level .add-on {
display: table-cell;
background-color: white;
}
.input-prepend.input-block-level > input {
box-sizing: border-box;
height: 30px;
display: table-cell;
width: 100%;
border-left-style: none;
}
Raw
style-original.css
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html {
height: 100%;
}
body {
background-color: #2c5c84;
background-image: -moz-radial-gradient(center, ellipse cover, #6A8BAB 0%, #2c5c84 100%);
background-image: -webkit-radial-gradient(center, ellipse cover,#6A8BAB 0%, #2c5c84 100%);
background-image: -o-radial-gradient(center, ellipse cover,#6A8BAB 0%, #2c5c84 100%);
background-image: -ms-radial-gradient(center, ellipse cover,#6A8BAB 0%, #2c5c84 100%);
background-image: radial-gradient(center, ellipse cover,#6A8BAB 0%, #2c5c84 100%);
}
.mc-login-inner.container {
padding-top: 20px;
}
.input-prepend {
display: table;
width: 100%;
}
.add-on.mc-add-on {
display: table-cell;
background-color: white;
}
.input-prepend .mc-input {
display: table-cell;
width: 100%;
border-left-style: none;
}
.center {
float: none;
margin: 0 auto;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment