Стиль для placeholder в CSS3 или реализация placeholder на javascript

Многие уже знают, что в html5 для input элементов добавился атрибут placeholder которого очень не хватало. Благодаря которому легко добавлять в input поля текст для примера или подсказки.

Но разные браузеры по-разному показывают стили для этого атрибута. Что бы задать единый стиль для всех можно воспользоваться слудующими CSS свойствами.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder {
   color: red;
}

Пока что данные стили реализованы для браузеров на webkit и для firefox. Но не будем забывать, что старые версии браузеров ещё не поддерживают этот атрибут.

Для реализации этого свойства можно воспользоваться следующим javascript кодом:

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

// А в DOM ready можно прописать следующее условие

if (!hasPlaceholderSupport()) {
        $('[placeholder]').focus(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).blur(function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
}

Соотвественно здесь вам придется уже добавить свои стили для класса placeholder