<div class="login-block">
<h3>Sharepoint Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
<p><label for="sharepoint-user-name">User Name</label><input type="text" name="sharepoint-user-name" id="sharepoint-user-name" /></p>
<p><label for="sharepoint-password">Password</label><input type="password" name="sharepoint-password" id="sharepoint-password" /></p>
<p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
</form>
</div>
<div class="login-block">
<h3>FTP Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
<p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
<p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
</form>
</div>
<div class="login-block last">
<h3>Secret Area Login</h3>
<form action="#" method="post" target="_blank">
<p><label for="secret-user-name">User Name</label><input type="text" name="secret-user-name" id="secret-user-name" /></p>
<p><label for="secret-password">Password</label><input type="password" name="secret-password" id="secret-password" /></p>
<p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
</form>
</div>
.login-block {
float: left;
margin: 0 49px 25px 0;
width: 260px;
}
.login-block form {
border: 3px solid #ccc;
padding: 20px;
}
.login-block .active-form {
border-color: red;
}
.login-block input[type="text"],
.login-block input[type="password"] {
border-color: #eeeeee #cccccc #cccccc #eeeeee;
border-right: 1px solid #cccccc;
border-style: solid;
border-width: 1px;
margin: 0 0 15px;
padding: 10px;
width: 200px;
}
body {
margin: 2rem;
}
var $forms = $("form");
$forms.focusin(function () {
$forms.removeClass("active-form");
$(this).addClass("active-form");
});
This Pen doesn't use any external CSS resources.