<div class="buttons">
<p class="intro">Click the <code>border-box</code> button to fix the layout with the power of Box Sizing!</p>
<button id="content">content-box</button>
<button id="border">border-box</button>
</div>
<div class="parent">
<form class="twins" action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br> Last name:<br>
<input type="text" name="lastname" value="Mouse"><br> Comments:
<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<form class="twins" action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br> Last name:<br>
<input type="text" name="lastname" value="Mouse"><br> Comments:
<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
.parent {
width: 70%;
border: 5px solid #E18728;
float: left;
}
.child {
width: 90%;
padding: 20%;
border: 4px solid black;
margin: .5em auto;
}
.twins {
width: 50%;
padding: 1em;
border: 4px solid black;
float: left;
}
input, textarea {
width: 100%;
}
body {
font-family: sans-serif;
font-size: 1.1em;
}
.buttons {
margin-bottom: .5em;
}
p:not(.intro) {
text-align: center;
}
$("#content").on("click", function() {
$("*").css("box-sizing", $(this).text());
});
$("#border").on("click", function() {
$("*").css("box-sizing", $(this).text());
});
Also see: Tab Triggers