Как изменить размер placeholder input - Исправление ошибок и поиск оптимальных решений проблем

I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder in HTML5. It works perfectly, except for one thing.

If I try to increase the font-size to a value higher than 16px, the text gets «cut» at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?

I have added a screenshot of two inputfields where the placeholders have an font-size of 20px

Jsfiddle: https://jsfiddle.net/bvwdg86x/

asked Jun 18, 2015 at 13:15

Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off.

You also might consider adding placeholder styles for other browsers…

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */

answered Jun 18, 2015 at 13:41

You have to add ‘overflow: visible’ to the placeholder in your css to get rid of the cropping.

::placeholder{
overflow: visible;
}

answered Sep 19, 2019 at 18:09

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}

<input type="text" placeholder="My Cool Placeholder Text">

answered Nov 20, 2018 at 12:17

imnik18imnik18

1192 gold badges2 silver badges12 bronze badges

Meanwhile, the browser vendors implemented the ::placeholder CSS pseudo-element.

You can find the current state of browser compatibility on caniuse.com.

Currently (2019-04-29) there are following notes:

::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)

::-ms-input-placeholder for Edge (also supports webkit prefix)

answered Apr 29, 2019 at 7:12

ˈvɔləˈvɔlə

8,59210 gold badges63 silver badges87 bronze badges

Источник

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

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css

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

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

input placeholder demo

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

font (и сопутствующие свойства)
background (и сопутствующие свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

А если placeholder не вмещается?

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

css

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

input placeholder demo

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

в некоторых браузерах при получении фокуса инпутом
в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

css

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input placeholder demo

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

input placeholder demo

Вот сss:

css

/* плавное изменение прозрачности  placeholder-а при фокусе */
.input1::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* сдвиг placeholder-а вправо при фокусе*/

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

/* сдвиг placeholder-а вниз при фокусе*/

.input3::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease;}
.input3::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease;}

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Источник

CSS псевдоэлемент ::placeholder представляет собой текст placeholder (en-US) в <input> или <textarea> (en-US) элементах.

::placeholder {
  color: blue;
  font-size: 1.5em;
}

В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line.

Примечание: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.

Синтаксис

Error: could not find syntax for this item

Примеры

Красный текст

HTML

<input placeholder="Введите что-нибудь!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Результат

Зелёный текст

HTML

<input placeholder="Введите что-нибудь...">

CSS

input::placeholder {
  color: green;
}

Результат

Проблемы доступности

Цветовой контраст

Контрастность

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

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

WebAIM: Color Contrast Checker
MDN Understanding WCAG, Guideline 1.4 explanations
Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <input> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания <input> элемента с подсказкой.

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

<label for="user-email">Ваш email адрес</label>
<span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">

Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows (en-US). Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Greg Whitworth — How to use -ms-high-contrast

Метки

Placeholder не является заменой элемента <label>. Без метки, которая программно связывается с формой с помощью for и id атрибутов, такие программы, как скринридеры не смогут анализировать элементы <input>.

MDN Basic form hints (en-US)
Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Спецификации

Specification
CSS Pseudo-Elements Module Level 4 # placeholder-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Псевдокласс :placeholder-shown, который позволяет применять стили к элементу с активным placeholder.
Связанные HTML-элементы: <input>, <textarea> (en-US)
HTML-формы

Источник

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

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

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

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

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

Стилизация

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

::-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
    }
  }
}

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

Посмотреть на SassMeister

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

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

Посмотреть на SassMeister

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

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

Сдвиг вниз

Посмотреть на SassMeister

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

.input {
  @include placeholder {
    color: #aaa;
    line-height: 15px;
    transition: line-height 300ms;
  }
  
  &:focus {
    @include placeholder {
      line-height: 50px;
    }
  }
}

Всё вместе

Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом (посмотреть на 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;
}

Источник

Исчезающая подсказка в `<input>` и `<textarea>` HTML

Внутри пустого поля ввода <input> или <textarea>, то есть пока атрибут value пустой или отсутствует, показывается надпись приглушенного цвета из атрибута placeholder, которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]

<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег <label> заменяют на атрибут placeholder, тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить <label> непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Стилизация: изменить цвет `placeholder` CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder. Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition.

<style>
.raz::placeholder {
  color: red;
  opacity: 1; 
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Поменять стиль поля ввода с `placeholder` CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder.

<style>
[placeholder] {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input>
<textarea></textarea>
<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder.

<style>
.raz:placeholder-shown {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Подсказка пропадает при получении фокуса `<input type="text | password |` другие`">` и `<textarea></textarea>`

<style>
.raz:focus::placeholder {
  opacity: 0;
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

В конце длинного обрезанного подсказывающего текста поставить многоточие

<style>
.raz:placeholder-shown {
  text-overflow: ellipsis;
}
</style>

<input placeholder="Обязательно заполняется при наличии" class="raz">

<style>
.raz:placeholder-shown {
  text-overflow: "1F4E7"; 
}
</style>

<input type="email" class="raz6" placeholder="name@site.ru                        ">

Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.

Отчество

Обязательно заполняется при наличии

Отчество
Обязательно заполняется при наличии

Сделать смещающиеся или всплывающие `<label>` в `<form>`

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 0;
  left: 2px;
  opacity: .5;
  visibility: hidden;
  transition: .2s;
}
.raz input:placeholder-shown ~ span {
  visibility: visible;
}
.raz input:placeholder-shown:focus ~ span,
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  font-size: 80%;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="&nbsp;"><span>Email</span></label>

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 50%;
  left: 2px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="Email"><span>Email</span></label>

Плавающие метки неоднородны с метками элементов других типов веб-формы. Их менее контрастный цвет хуже различим. [medium.com]

Эффект `placeholder` для `<div>`

Атрибут placeholder работает только для <input> и <textarea>, даже если у других тегов указан атрибут contenteditable. [whatwg.org]

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
</style>

<div contentEditable placeholder="Можно ввести текст" class="raz"></div>

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
.raz:empty:not(:focus)::before { 
  content: attr(data-placeholder);
  opacity: .5;
}
</style>

<div contentEditable data-placeholder="Можно ввести текст" class="raz"></div>

Древний метод на память, изменяющий `value` JavaScript

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Email"
 title="Email"
/>

Источник

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

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

::placeholder { 
 color: deeppink;
}

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}

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

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:

::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

h1 {
 color: blue;
}

Так что в нашем HTML это будет выглядеть как ожидалось

Hello

Но что произойдет, если мы добавим неверный селектор CSS

h1, /* valid */
h2::poop /* invalid */
{
 color: blue;
}

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

Hello

Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

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

Вот список всех стилей, которые вы можете применить к вашему placeholder:

background свойства
color
font свойства
letter-spacing
line-height
opacity
text-decoration
text-indent
text-transform
vertical-align
word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:

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

Автоматически добавлять Vendor-префиксы

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

Источник

html

css

А если placeholder не вмещается?

css

Как скрыть placeholder при фокусе?

css

Скрываем placeholder красиво

css

Синтаксис

Примеры

Красный текст

HTML

CSS

Результат

Зелёный текст

HTML

CSS

Результат

Проблемы доступности

Цветовой контраст

Контрастность

Использование

Режим высокой контрастности Windows

Метки

Спецификации

Совместимость с браузерами

Смотрите также

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

Стилизация

Пример

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

Анимации

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

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

Сдвиг вниз

Всё вместе

Autoprefixer

Что дальше

Исчезающая подсказка в <input> и <textarea> HTML

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

Поменять стиль поля ввода с placeholder CSS

Подсказка пропадает при получении фокуса <input type="text | password | другие"> и <textarea></textarea>

В конце длинного обрезанного подсказывающего текста поставить многоточие

Сделать смещающиеся или всплывающие <label> в <form>

Эффект placeholder для <div>

Древний метод на память, изменяющий value JavaScript

Префиксы

Псевдоэлемент против псевдокласса

Непрозрачность Placeholder в Firefox по умолчанию

CSS-обработка неверных селекторов

Hello

Hello

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

Проблемы доступности

Автоматически добавлять Vendor-префиксы

Читайте также:

Исчезающая подсказка в `<input>` и `<textarea>` HTML

Стилизация: изменить цвет `placeholder` CSS

Поменять стиль поля ввода с `placeholder` CSS

Подсказка пропадает при получении фокуса `<input type="text | password |` другие`">` и `<textarea></textarea>`

Сделать смещающиеся или всплывающие `<label>` в `<form>`

Эффект `placeholder` для `<div>`

Древний метод на память, изменяющий `value` JavaScript