Bootstrap snippet: Update status form

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form

<link href="" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="#" method="post" role="form" enctype="multipart/form-data" class="update-status-form"> <ul class="post-types"> <li class="post-type"> <a class="status" title="" href="#"><i class="fa fa-file"></i> Share an Update</a> </li> <li class="post-type"> <a class="photos" href="#"><i class="fa fa-camera"></i> Add photos</a> </li> </ul> <div class="share"> <div class="arrow"><i class="fa fa-arrow-up"></i></div> <div class="panel panel-default"> <div class="panel-heading"><i class="fa fa-file"></i> Update Status</div> <div class="panel-body"> <div class=""> <textarea name="message" cols="40" rows="10" id="status_message" class="form-control message" style="height: 62px; overflow: hidden;" placeholder="What's on your mind ?"></textarea> </div> </div> <div class="panel-footer"> <div class="row"> <div class="col-md-7"> <div class="form-group"> <div class="btn-group"> <button type="button" class="btn btn-default"><i class="icon icon-map-marker"></i> Location</button> <button type="button" class="btn btn-default"><i class="icon icon-picture"></i> Photo</button> </div> </div> </div> <div class="col-md-5"> <div class="form-group"> <select name="privacy" class="form-control privacy-dropdown pull-left input-sm no-radius"> <option value="1" selected="selected">Public</option> <option value="2">Friends</option> <option value="3">Only me</option> </select> <input type="submit" name="submit" value="Post" class="btn btn-primary btn-sm no-radius"> </div> </div> </div> </div> </div> </div> </form> </div> </div> </div>
body { padding-top: 40px; padding-bottom: 40px; } .update-status-form { width: 100%; } .update-status-form .share { -webkit-transition: 0.1s ease-out height; -moz-transition: 0.1s ease-out height; -ms-transition: 0.1s ease-out height; -o-transition: 0.1s ease-out height; transition: 0.1s ease-out height; clear: both; background: white; border: 2px solid #dddddd; margin-bottom: 10px; position: relative; } .update-status-form .share .arrow { position: absolute; width: 14px; height: 10px; left: 4px; display: inline; top: -10px; -webkit-transition: 0.3s ease-out all; -moz-transition: 0.3s ease-out all; -ms-transition: 0.3s ease-out all; -o-transition: 0.3s ease-out all; transition: 0.3s ease-out all; } .update-status-form .share .arrow .fa{ font-size:20px; color:#ddd; } .update-status-form .post-types li a { color: #085083; text-decoration: none; } .update-status-form .post-types li { color: #404040; } .update-status-form .post-types { padding-left: 5px; } .update-status-form ul { list-style: none; margin-bottom: 9px; } .update-status-form .post-types li { display: inline; margin-right: 10px; } .message { border-radius: 0; border: none; } .panel { border-radius: 0; border: none; margin-bottom: 0; } .privacy-dropdown { width: 100px; } .no-radius{ border-radius:0px; }
$(document).ready(function(){ $('.status').click(function(e){ $('.arrow').css("left", 0); e.preventDefault(); }); $('.photos').click(function(e) { $('.arrow').css("left", 146); e.preventDefault(); }); });

Update status form

  Jun 21st 2015, 20:52