work@lienusowl.ru

Полное портфолио: zsws.ru

CSS стили для placeholder

Бывает необходимо поменять цвет placeholder у тега input в форме, такое бывает если стили инпута изменены - фон инпута к примеру стал черный, а шрифт у нас по умолчанию тоже черный - тога необходимо чтобы placeholder читался - задать ему цвет текста.

Задать просто стиль color для инпута не поможет, это свойство будет менять цвет вводимого текста, а не самого placeholder, ниже оставлю заготовку для стилей placeholder

	::-webkit-input-placeholder {color:#fff;}
    ::-moz-placeholder          {color:#fff;}/* Firefox 19+ */
    :-moz-placeholder           {color:#fff;}/* Firefox 18- */
    :-ms-input-placeholder      {color:#fff;}

Как можно работать с placeholder

А вот еще классный момент, стиля для сдвига placeholder-а вправо при фокусе, к сожалению не могу дать ссылку на источник где это взял (не осталось), там были еще интереные примеры.

    .input::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
    .input::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
    .input:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
    .input:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
    .input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
    .input:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
    .input:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
    .input:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

Пример