Как изменить placeholder css

Как стилизовать placeholder?

Хочу убрать рамку у плэйсхолдера и как-нибудь его украсить, но не могу понять как: Нашёл лишь способ изменить цвет и расположение текста в нём:

.trial__form < display: flex; flex-direction: column; justify-content: space-between; background-color: #ffffff; border-radius: 5px; height: 362px; width: 360px; >.trial__form ::placeholder < color: #b0b0b0; position: relative; left: 15px; top: -5px; font-family: 'Open Sans'; font-size: 14px; >.input__trial

 Try Your FREE Trial Today
   Get Started

Отслеживать
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
задан 27 окт 2020 в 16:19
Ruslan Hellfire Ruslan Hellfire
9 3 3 бронзовых знака
Ну, рамки, вроде бы, можно убрать с помощью border:none;
27 окт 2020 в 16:27
Только сделайте это к псевдо-классу :active нужных input
27 окт 2020 в 16:29

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Рамка принадлежит не плейсхолдеру, а инпуту. Она появляется при фокусе на поле ввода. Ее можно убрать так:

.input__trial:focus

Отслеживать
ответ дан 27 окт 2020 в 16:35
Tina Dumilina Tina Dumilina
56 2 2 бронзовых знака
спасибо большое, помогло
27 окт 2020 в 19:03

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Цвет замещающего текста

В HTML5 к полям формы добавлен атрибут placeholder , который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.

Пример 1. Использование placeholder

HTML5 CSS 2.1 IE Cr Op Sa Fx

    placeholder body input[type="search"]

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .

В Safari и Chrome стиль текста меняется следующим образом.

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5 CSS3 IE Cr Op Sa Fx

    placeholder body input[type="search"] < padding: 3px; background: #333; color: #053f38; border: 1px solid #ccc; >input[type="search"]::-webkit-input-placeholder < color: #ccc; >input[type="search"]::-moz-placeholder

Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

Как изменить цвет placeholder.

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

Причем, эти текстовые значения автоматически исчезают, когда пользователь начинает вводить в текстовое поле какую-либо информацию.

Такой эффект достигается за счет использования атрибута placeholder. Почитать подробнее об этом атрибуте можно здесь.

Сегодня хочу поделиться техникой, как вы можете менять цвет текста, который создается с помощью этого атрибута.

Чтобы понять, как это делается, посмотрите на следующий пример:

::-webkit-input-placeholder < /* WebKit browsers */ color: red; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: red; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: red; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: red; >

Довольно интересная техника, нашел ее на англоязычном форуме. Надеюсь, что для вас она также как и для меня окажется полезной.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Стилизация плэйсхолдеров

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

Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

 type="email" placeholder="example@gmail.com">

При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать здесь.

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

::-webkit-input-placeholder  color: blue; > ::-moz-placeholder  color: blue; > /* Firefox 19+ */ :-moz-placeholder  color: blue; > /* Firefox 18- */ :-ms-input-placeholder  color: blue; >

Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse.

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

@mixin placeholder  &::-webkit-input-placeholder  @content; > &:-moz-placeholder  @content; > &::-moz-placeholder  @content; > &:-ms-input-placeholder  @content; > >

В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

// Глобально для каждого поля ввода @include placeholder  color: blue; > // Для определённых полей ввода .input  @include placeholder  color: green; > >

Пример

Синий текст для плэйсхолдера (никогда так не делайте):

.blue-text::-webkit-input-placeholder  color: #2e8ece; > .blue-text:-moz-placeholder  color: #2e8ece; > .blue-text::-moz-placeholder  color: #2e8ece; > .blue-text:-ms-input-placeholder  color: #2e8ece; >

Поддерживаемые свойства

Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

font и все связанные свойства ( font-size , font-family и т.д.)
background и все связанные свойства ( background-color , background-image и т.д.)
opacity
text-indent
text-overflow
color
text-transform
line-height
word-spacing
letter-spacing
text-decoration
vertical-align

Анимации

Идеи анимаций принадлежит блогу html5.by.

Все следующие примеры написаны с использованием препроцессора Sass. К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder :

.input  @include placeholder  // Стили для нормального состояния > &:focus  @include placeholder  // Стили после события focus > > >

Изменение прозрачности

.input  @include placeholder  color: #aaa; opacity: 1; transition: opacity 300ms; > &:focus  @include placeholder  opacity: 0; > > >

Сдвиг вправо и влево

Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

.input  @include placeholder  text-indent: 0px; transition: text-indent 300ms; > &:focus  @include placeholder  text-indent: 500px; > > >

Сдвиг вниз

Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

.input  @include placeholder  text-indent: 0px; transition: text-indent 300ms; > &:focus  @include placeholder  text-indent: 500px; > > >

Всё вместе

Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом (посмотреть на SassMeister):

@mixin placeholder  &::-webkit-input-placeholder @content> &:-moz-placeholder @content> &::-moz-placeholder @content> &:-ms-input-placeholder @content> > @mixin pl-shift($side: left, $position: 500px, $duration: 200ms)  @include placeholder  text-indent: 0; transition: text-indent $duration; > &:focus  @include placeholder  text-indent: if($side == left, -$position, $position); > > > @mixin pl-slide-down($position: 5, $duration: 200ms)  @include placeholder  line-height: 1; transition: line-height $duration; > &:focus  @include placeholder  line-height: $position; > > > @mixin pl-fade-out($duration: 200ms)  @include placeholder  opacity: 1; transition: opacity $duration; > &:focus  @include placeholder  opacity: 0; > > >

Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:

// Для отдельных элементов .pl-shift-right  @include pl-shift( right ); > .pl-fade-out  @include pl-fade-out; > // Для всего остального @include pl-shift( left );

Autoprefixer

Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer. С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент ::placeholder :

::placeholder  color: orange; > .input::placeholder  color: blue; >

После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс :placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Применять стили с помощью :placeholder-shown будет гораздо проще:

.input:placeholder-shown  color: blue; >

Читать:

Чем javascript отличается от java