Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Css цвет placeholder в input

Стилизация HTML5 плейсхолдера с помощью CSS

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом: Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS. Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:

input::-webkit-input-placeholder {} input:-moz-placeholder {} Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:input:-moz-placeholder, input::-webkit-input-placeholder { }то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.

Еще несколько примеров:

/* стили для webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* стили для mozilla */ #field2:-moz-placeholder { color:#00f; } #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.

Список поддерживаемых CSS стилей для атрибута placeholder:

	Chrome 10(Win 7)	Chrome 11 (Win 7)	Firefox 4(Win 7)	Safari 3.1(Win XP & OS X)	Safari 5(Win 7 & OS X)	Opera 11(Win 7)
background-color	нет	нет	+	нет	+	нет
border	нет	нет	+	нет	+	нет
color	+	+	+	нет	+	нет
font-size	+	+	+	нет	+	нет
font-style	+	+	+	нет	+	нет
font-weight	+	+	+	нет	+	нет
letter-spacing	+	+	+	нет	+	нет
line-height	нет	нет	нет	нет	нет	нет
padding top/bottom	нет	нет	+	нет	+	нет
padding left/right	нет	нет	+	нет	нет	нет
text-decoration	нет	нет	+	нет	+	нет
text-transform	нет	нет	+	нет	+	нет

Теги:

Стилизация элемента placeholder в CSS

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

Где находится плейсхолдер?

Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный псевдоэлемент CSS ::placeholder. С его помощью можно управлять свойствами подсказки.

Стилизация placeholder на CSS выглядит так:

input::placeholder { color: red; opacity: 1; font-style: italic; }

Поддержка браузерами

Псевдоэлемент CSS placeholder хорошо обрабатывается всеми современными браузерами, а для поддержки старых обозревателей можно воспользоваться префиксами:

::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);
::-moz-placeholder - для браузеров Firefox выше 19 версии;
:-moz-placeholder - для старых Firefox;
:-ms-input-placeholder - для Internet Explorer выше 10 версии.

Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

фон - группа background-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
цвет текста - color;
прозрачность - opacity;
подчеркивание, надчеркивание или зачеркивание - text-decoration;
регистр - text-transform;
внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
вертикальное выравнивание в строке - vertical-align;
обрезка текста при переполнении контейнера - text-overflow.

.input1::placeholder { background-image: linear-gradient(lime, blue); color: white; } .input2::placeholder { text-decoration: line-through; color: purple; font-weight: bold; } .input3::placeholder { font-size: 16px; letter-spacing: 10px; } .input4::placeholder { background: brown; color: white; text-overflow: ellipsis; }

В фокусе

По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но псевдоэлемент CSS placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом :focus.

input:focus::placeholder { color: transparent; }

В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.

Добавляем CSS стиль для placeholder

Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

Задача: сделать свой css стиль для placeholder

Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

Решение: css стиль для placeholder

Итак, задачу мы поставили, как же будем её решать?

Сначала сделаем полигон для тестирования:

Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и :-moz-placeholder. Посмотрим как их использовать:

Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

input{ width: 250px; color: blue; font-weight: normal; font-style: normal; }

Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

input::-webkit-input-placeholder{ color: red; font-style: italic; font-weight: bold; }

Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; }

Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:

Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

Понравилась или помогла статья? Купите мне кофе

Стилизация и анимация placeholder в input и textarea при помощи CSS

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

Итак, цвет текста нашего placeholder-а можно изменить использовав, например следующий набор css-правил:

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

Объемность кода для стилизации такого простого свойства обусловлена отсутсивтемотсутствием общего стандарта, в связи с чем каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

Кроме того, поддерживаются не все css свойства. Вот перечень точно поддержываемых свойств:

font (и связанные) background (и связанные) color word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-indent text-overflow

opacity

Также бывает так, что текст плейсхолдера «выходит» за пределы ширины элемента input или textarea (частый случай для мобильных устройств). При этом он автоматически некрасиво обрезается.

Исправить эту неприятность нам поможет такое css-свойство, как text-overflow: ellipsis, которое добавит эстетическое троееточие к обрезанному участку placeholder-a. В стилях прописываем вот так:

input[placeholder] {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;}

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

Несколько примеров такого скрытия с элементами анимации:

/* плавное изменение прозрачности placeholder-а при фокусе */ .input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* сдвиг 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;} /* сдвиг placeholder-а вниз при фокусе*/ .input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

На этом и закончим.

проспект И.Мазепы 5 07300 Украина, Киевская обл., г. Вышгород, +38 (093) 636 78 08