Многие уже знают, что в 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

Навигационное меню сайта - это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.

Множество разработчиков создает этот элемент различными способами, но я хотел бы представить Вашему вниманию одну из самых удачных практик.

Узнать больше »