Awesome textarea

In this example below you will see how to do a Awesome textarea with some HTML / CSS and Javascript

A really nice textarea with a background colour change on focus

This awesome code was written by ayoungh, you can see more from this user in the personal repository.
You can find the original code on
Copyright ayoungh ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Awesome textarea</title>
  <script src="" type="text/javascript"></script>

    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <h2>Awesome Textarea</h2>

<textarea placeholder="This is an awesome comment box" rows="20" name="comment[text]" id="comment_text" cols="40" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></textarea>
  <script src=''></script>




/*Downloaded from */
body {background: #F0F0F0;}

h2 {margin-left: 55px;}

textarea {
  margin-top: 10px;
  margin-left: 50px;
  width: 500px;
  height: 100px;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
  border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
  border-image: none;
  border-radius: 6px 6px 6px 6px;
  border-style: none solid solid none;
  border-width: medium 1px 1px medium;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  color: #555555;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  padding: 5px 8px;
  transition: background-color 0.2s ease 0s;

textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;