Twitter style compose box

In this Post we have designed how the compose box is  being designed in twitter using css.on clicking on this text box the size of the textbox gets expanded automatically without any jquery.

Live Demo   Download

CSS

on clicking on this text box the size of the textbox gets expanded automatically using CSS.

   

     

<style type="text/css">
input[type]
{
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
width:350px;
min-height: 28px;
padding: 4px 20px 4px 8px;
font-size: 18px;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
input[type=text]:focus
{
width: 450px;
height:150px;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
outline: none;
}
</style>

HTML

<form name="Twitte" method="post">
<h1>Twitter Style Compose box</h1>
<p><strong>compose your new Twit</strong>
<input type="text" name="comments" placeholder="compose your new Twit" ></p>
</form>

Live Demo

Twitter Style Compose box

compose your new Twit