Войти
Регистрация

Placeholder для input и его увеличение при вводе

Placeholder для input

В этой теме расскажу как можно создать эффект плавного увеличения атрибута placeholder для тега <input /> при фокусе, т.е. установки курсора в поле ввода, а также уменьшение при снятии фокуса.

Атрибут placeholder, если Вы пока не знаете, отвечает за подсказывающий текст внутри поля ввода, т.е. <input />.

С помощью CSS правил можно задавать ему любой стиль.

CSS-код отвечающий за его стиль содержит несколько строк для нескольких браузеров и выглядит так:

::-webkit-input-placeholder {
   font-size:14px;
   transition:0.5s;
}
::-moz-placeholder {
   font-size:14px;
   transition:0.5s;
}
:-moz-placeholder {
   font-size:14px;
   transition:0.5s;
}
:-ms-input-placeholder {
   font-size:14px;
   transition:0.5s;
}

Здесь мы задали размер шрифта 14px для атрибута placeholder и длительность в полсекунды при его уменьшении.

Чтобы создать CSS-правило, которое будет создавать эффект увеличения при фокусе, напишем следующий код:

:focus::-webkit-input-placeholder {
   font-size:17px;
   transition:0.5s;
}
:focus::-moz-placeholder {
   font-size:17px;
   transition:0.5s;
}
:focus:-moz-placeholder {
   font-size:17px;
   transition:0.5s;
}
:focus:-ms-input-placeholder {
   font-size:17px;
   transition:0.5s;
}

Здесь мы вначале указали превдокласс focus, который отвечает за стиль при фокусе и задали размер шрифта больше изначального, а также длительность анимации в полсекунды при увеличении, т.е. при фокусе.

Пример работы кода в действии:

Вы можете применять любые стили для placeholder: цвет, размер шрифта, можете сдвинуть вправо при фокусе, добавив поле слева при фокусе и т.д.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?