After не работает для input

Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS псевдоэлементы ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку эти элементы, так называемые «замещаемые элементы», специальная категория объектов, описанная в разделе «Рендеринг» стандарта HTML:

Следующие элементы могут быть полностью заменены:
audio, canvas, embed, iframe, img, input, object, video.

Участник CSS Working Group под ником fantasai объясняет это на GitHub:

Замещаемые элементы могут полностью заменить все содержимое элемента, в том числе псевдоэлементы ::before и ::after. Вот почему в замещаемых элементах не работают псевдоэлементы.

Например, невозможно использовать ::before для элемента img, чтобы отобразить альтернативный текст (alt) — при этом метод сработает для других элементах (например на параграфе p).

В зависимости от браузера и других факторов, элемент img иногда может быть не замещаемым. Например, если изображение не загружается, у нас появляется возможность добавить ::before и ::after к img (эта возможность есть только в Chrome и Firefox).

Ситуация становится более запутанной, когда дело касается элементов формы. Элементы input и textarea, в настоящее время рассматривается как «частично замещенные» — определение, которое использует Tab Atkins (редактор спецификаций CSS) в обсуждениях Working Group на GitHub.

Так или иначе, возможность добавления ::before и ::after для полей ввода зависит от типа input и используемого браузера. Например, Chrome и Safari поддерживают свойство content для input type=»checkbox» и input type=»radio».

Если у вас возникли проблемы с использованием ::before или ::after для какого либо элемента, не забудьте проверить, не является ли этот элемент полностью или частично замещаемым элементом.

Источник

Могу ли я использовать:before или:after псевдо-элемент в поле ввода?

Я пытаюсь использовать :after CSS псевдо-элемент на input поле, но оно не работает. Если я использую его с span , он работает нормально.

это работает (ставит смайлик после «Буу! и перед «еще немного»)

это не работает — он только окрашивает someValue в красный цвет, но нет смайлика.

что я делаю не так? должен ли я использовать другой псевдоселектор?

примечание: Я не могу добавить span вокруг моего input , потому что он генерируется сторонним элементом управления.

19 ответов

:after и :before не поддерживаются в Internet Explorer 7 и ниже, на любых элементах.

Он также не предназначен для использования на замененных элементах, таких как элементы вида (входы) и элементы изображения.

иными словами,невозможно С чистым CSS.

при использовании в jQuery можно использовать

добавить свой содержание с javascript. Это будет работать во всех браузерах.

:before и :after рендеринг внутри контейнера

и не могут содержать другие элементы.

псевдо-элементы могут быть определены только (или лучше сказать, поддерживаются только) на элементах контейнера. Потому что способ их визуализации —внутри сам контейнер как дочерний элемент. input не может содержать другие элементы, поэтому они не поддерживаются. А button С другой стороны, это также элемент формы поддерживает их, потому что это контейнер с другими подэлементами.

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

спецификация W3C

если мы внимательно читаем спецификация он на самом деле говорит, что они вставлены внутри содержащий элемент:

авторы определяют стиль и расположение контента с помощью :before и :after псевдо-элементы. Как показывают их имена, псевдо-элементы :before и :after указывают местоположение содержимого до и после содержимого дерева документов элемента. Свойство «content» в сочетании с этими псевдоэлементами указывает, что вставляется.

посмотреть? дерево документов элемента контент. Как я понимаю, это означает внутри контейнер.

как ни странно, он работает с некоторыми типами ввода. По крайней мере в Chrome,

работает отлично, так же, как

Это просто type=text и некоторые другие, которые не работают.

вот еще один подход (предполагая, что у вас есть контроль над HTML): добавьте пустой сразу после ввода и целевой, что в CSS с помощью input.mystyle + span:after

Я использую этот подход в AngularJS, потому что он добавит .ng-invalid классы автоматически элементы формы, и к форме, но не к .

:before и :after применяются внутри контейнера, что означает, что вы можете использовать его для элементов с конечным тегом.

он не применяется для самозакрывающихся элементов.

на боковой ноте элементы, которые являются самозакрывающимися (например, img/hr/input), также известны как «замененные элементы», поскольку они заменяются соответствующим содержимым. «Внешние объекты» за неимением лучшего термина. Лучше читать здесь

я использовал background-image для создания Красной точки для обязательных полей.

Источник

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span , it works OK.

This works (puts the smiley after «buu!» and before «some more»)

This does not work — it only colors someValue in red, but there is no smiley.

What am I doing wrong? should I use another pseudo-selector?

Note: I cannot add a span around my input , because it is being generated by a third-party control.

21 Answers 21

:before and :after render inside a container

and can not contain other elements.

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they’re not supported. A button on the other hand that’s also a form element supports them, because it’s a container of other sub-elements.

If you ask me, if some browser does display these two pseudo-elements on non-container elements, it’s a bug and a non-standard conformance. Specification directly talks about element content.

W3C specification

If we carefully read the specification it actually says that they are inserted inside a containing element:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

See? an element’s document tree content. As I understand it this means within a container.

Источник

Могу ли я использовать псевдоэлемент: before или: after в поле ввода?

Я пытаюсь использовать псевдоэлемент :after CSS в поле input , но он не работает. Если я использую его с span , он работает нормально.

Это работает (ставит смайлик после «buu!» И до «еще немного»)

Это не работает — он только окрашивает someValue в красный цвет, но смайлик отсутствует.

Что я делаю неправильно? Должен ли я использовать другой псевдоселектор?

Примечание. Я не могу добавить span вокруг моего input , потому что он создается сторонним элементом управления.

19 ответов

:after и :before не поддерживаются в Internet Explorer 7 и ниже, для любых элементов.

Он также не предназначен для использования на замененных элементах, таких как элементы формы (входы) и элементы изображения.

Другими словами, это невозможно с чистым CSS.

Однако, если вы используете jquery, вы можете использовать

Чтобы добавить свой контент в javascript. Это будет работать во всех браузерах.

:before и :after сделать внутри контейнера

и Не может содержать другие элементы.

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

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

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

Если мы внимательно прочитаем спецификацию, это на самом деле Говорит, что они вставлены внутри содержащего элемент:

Авторы определяют стиль и расположение сгенерированного контента с помощью: before и: after псевдоэлементов. Как показывают их имена, псевдовые элементы: before и: after определяют местоположение содержимого до и после содержимого дерева документа элемента. Свойство «content» в сочетании с этими псевдоэлементами указывает, что вставляется.

См? дерево документа элемента . Насколько я понимаю, это означает внутри контейнер.

Источник

Могу ли я использовать псевдоэлемент: before или: after в поле ввода?

Я пытаюсь использовать :after псевдоэлемент CSS на input поле, но он не работает. Если я использую это с span , это работает хорошо.

Это работает (ставит смайлик после «buu!» И перед «еще немного»)

Это не работает — он только окрашивает someValue в красный, но смайлика нет.

Что я делаю неправильно? я должен использовать другой псевдо-селектор?

Примечание: я не могу добавить span вокруг моего input , потому что он создается сторонним элементом управления.

:after и :before не поддерживаются ни в Internet Explorer 7, ни в каких-либо элементах.

Он также не предназначен для использования на заменяемых элементах, таких как элементы формы (входы) и элементы изображения .

Другими словами, это невозможно с чистым CSS.

Однако, если вы используете jquery, вы можете использовать

Чтобы добавить свой контент с помощью JavaScript. Это будет работать во всех браузерах.

:before и :after визуализировать внутри контейнера

и не может содержать другие элементы.

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

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

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

Если мы внимательно прочитаем спецификацию он на самом деле говорит , что они вставляются внутри вмещающего элемента:

Авторы определяют стиль и расположение сгенерированного контента с помощью псевдоэлементов: before и: after. Как указывают их имена, псевдоэлементы: before и: after указывают местоположение содержимого до и после содержимого дерева документа элемента. Свойство content в сочетании с этими псевдоэлементами определяет, что вставляется.

Видеть? содержимое дерева документа элемента . Насколько я понимаю, это означает, что внутри контейнера.

Источник