Update status form

This bootstrap snippet Update status form was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: form

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" 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>


This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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 a.active {
    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;    
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

$(document).ready(function(){
	$('.status').click(function(e){ 
        $('.arrow').css("left", 0);
        e.preventDefault();
    });
	$('.photos').click(function(e) {
        $('.arrow').css("left", 146);
        e.preventDefault();
    });

});
 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 21st 2015, 20:52

Views: 519