Text ve Textarea / turuncu tema

<style>

  input[type=text], textarea {

    -webkit-transition: all 0.30s ease-in-out;

    -moz-transition: all 0.30s ease-in-out;

    -ms-transition: all 0.30s ease-in-out;

    -o-transition: all 0.30s ease-in-out;

    outline: none;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid #DDDDDD;

  }

  input[type=text]:focus, textarea:focus {

    box-shadow: 0 0 5px orange;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid orange;

  }

</style>

<form action="#" method="post">

  <div>

    <label for="textId" style="color:orange">Text</label>

    <input type="text" id="textId" value="" tabindex="1" />

  </div>

  <div>

    <label for="textareaId" style="color:orange">Textarea</label>

    <textarea cols="40" rows="8" name="textarea" id="textareaId"></textarea>

  </div>

</form> 

<style>

  @import "compass/css3";

  input[type=text], textarea {

    @include transition(all 0.30s ease-in-out);

    outline: none;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid orange;

  }

  input[type=text]:focus, textarea:focus {

    @include box-shadow(orange);

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid orange;

  }

  label {

    width: 150px;

    float: left;

  }

  input[type=text], textarea {

    -webkit-transition: all 0.30s ease-in-out;

    -moz-transition: all 0.30s ease-in-out;

    -ms-transition: all 0.30s ease-in-out;

    -o-transition: all 0.30s ease-in-out;

    outline: none;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid #DDDDDD;

  }

  input[type=text]:focus, textarea:focus {

    box-shadow: 0 0 5px orange;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid orange;

  }

</style>