Styling the HTML5 placeholder

Placeholder Attribute

<input type='text' name='email' placeholder='Email Address'/>
<textarea name="message" placeholder="Message" style="width:95%;"></textarea>

Supporting Older Browsers

// A jQuery based placeholder polyfill
$(document).ready(function(){
  function add() {
    if($(this).val() === ''){
      $(this).val($(this).attr('placeholder')).addClass('placeholder');
    }
  }

  function remove() {
    if($(this).val() === $(this).attr('placeholder')){
      $(this).val('').removeClass('placeholder');
    }
  }

  // Create a dummy element for feature detection
  if (!('placeholder' in $('<input>')[0])) {

    // Select the elements that have a placeholder attribute
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

    // Remove the placeholder text before the form is submitted
    $('form').submit(function(){
      $(this).find('input[placeholder], textarea[placeholder]').each(remove);
    });
  }
});

Styling The Placeholder

::-webkit-input-placeholder { color:#999;font-weight: bold; }
::-moz-placeholder { color:#999; } /* FF 19+ */
:-moz-placeholder { color:#999; } /* FF 18- */
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; } /* for the polyfill */
textarea::-webkit-input-placeholder {
  color: #30BEEB;
}

DEMO