Twitter style compose box - Mostlikers

07 August, 2013

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.



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

1 comment: