CSS style input box design coding

This topic we discuss about CSS3 code. CSS3 they release lot of style code, here i am using text box design. CSS3 induced cursor focus script and hover change style also. Just follow this note learn CSS3 styles. Have look to live demo.

Live Demo                Download

Html

<form>
    <p><label>username</label>
    <input name="username" type="text"></p>
    <p><label>Password</label>
    <input name="password" type="text"></p>
    <p><label for="textarea">Textarea</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </p>
    <input name="submit" value="submit" type="submit">
</form>

CSS3

<style type="text/css">
input[type=text],textarea
      {
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
      width:200px;
      min-height: 28px;
      padding: 4px 20px 4px 8px;
      font-size: 12px;
      -moz-transition: all .2s linear;
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      }
 input[type=text]:focus,textarea:focus
      {
      width: 400px;
      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;
      }
 input[type="text"]:hover{
        outline: none;
        box-shadow: 0px 0px 5px #61C5FA;
        border:1px solid #5AB0DB;
        border-radius:0;

}
</style>

Try it yourself