Я пытаюсь использовать :after
псевдоэлемент CSS на input
поле, но он не работает. Если я использую это с span
, это работает хорошо.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
Это работает (ставит смайлик после "buu!" И перед "еще немного")
<span class="mystyle">buuu!</span>a some more
Это не работает - он только окрашивает someValue в красный, но смайлика нет.
<input class="mystyle" type="text" value="someValue">
Что я делаю неправильно? я должен использовать другой псевдо-селектор?
Примечание: я не могу добавить span
вокруг моего input
, потому что он создается сторонним элементом управления.
html
css
pseudo-element
css-content
матра
источник
источник
border-color
изinput
вместо. Я считаю, что это привлекает больше внимания.Ответы:
:after
и:before
не поддерживаются ни в Internet Explorer 7, ни в каких-либо элементах.Он также не предназначен для использования на заменяемых элементах, таких как элементы формы (входы) и элементы изображения .
Другими словами, это невозможно с чистым CSS.
Однако, если вы используете jquery, вы можете использовать
API документы на .after
Чтобы добавить свой контент с помощью JavaScript. Это будет работать во всех браузерах.
источник
:after
в целом, хотя он не поддерживает ни:before
или:after
на входах.:after
и:before
псевдоэлементы, они могут быть размещены только на элементах контейнера. Почему? Потому что они добавлены внутри этого конкретного элемента.input
это не контейнер.button
например, следовательно, вы можете надеть их. Работает как положено. Спецификация на самом деле говорит: до и после содержимого дерева задокументировать элемент Это явно говорит CONTENT . Таким образом, элемент должен быть контейнером.:before
и:after
визуализировать внутри контейнераи <input> не может содержать другие элементы.
Псевдоэлементы могут быть определены (или, точнее, поддерживаются) только для элементов контейнера. Потому что способ их визуализации находится внутри самого контейнера как дочерний элемент.
input
не может содержать другие элементы, следовательно, они не поддерживаются. Аbutton
с другой стороны, это также элемент формы, который поддерживает их, потому что это контейнер других подэлементов.Если вы спросите меня, если какой - то браузер делает отображать эти два псевдо-элементы, не имеющие отношения элементов контейнера, это ошибка и нестандартным соответствие. Спецификация напрямую говорит о содержании элемента ...
Спецификация W3C
Если мы внимательно прочитаем спецификацию он на самом деле говорит , что они вставляются внутри вмещающего элемента:
Видеть? содержимое дерева документа элемента . Насколько я понимаю, это означает, что внутри контейнера.
источник
[required]::before { content "*"; color: red; }
: P<input type="submit" value="Send"/>
, используйте<button type="submit">Send</button>
вместо этого. Презентация идентична, но<button>
является контейнером и, следовательно, поддерживает:before
и:after
.<hr />
? Я думал, что это не элемент контейнера, но он мог отрендериться:after
и:before
jsfiddle.net/Uf88j/1p
иh1
, содержимое находится внутри тега, поэтому до и после также отображаются внутри. С такими элементами, какinput
иhr
,: before и: after все равно будет отображаться до или после содержимого, но контейнер не задействован (особенно дляinput
). input: checked: before широко используется для обозначения флажков, проверяемых с помощью css.Как ни странно, он работает с некоторыми типами ввода. По крайней мере, в Chrome,
работает нормально, так же, как
Просто
type=text
и некоторые другие не работают.источник
Вот еще один подход (при условии, что у вас есть контроль над HTML): добавьте пустое
<span></span>
сразу после ввода и укажите его в CSS, используяinput.mystyle + span:after
Я использую этот подход в AngularJS, потому что он будет добавлять
.ng-invalid
классы автоматически для<input>
элементов формы и формы, но не для<label>
.источник
input:hover+span:after{color: blue}
. Upvote.:before
и:after
применяются внутри контейнера, что означает, что вы можете использовать его для элементов с конечным тегом.На заметку о том, что элементы, которые являются самозакрывающимися (например, img / hr / input), также известны как «Замененные элементы», так как они заменены соответствующим содержимым. «Внешние объекты» из-за отсутствия лучшего термина. А лучше почитайте здесь
источник
Я использовал
background-image
для создания красной точки для обязательных полей.Посмотреть на Codepen
источник
Вы не можете поместить псевдоэлемент в элемент ввода, но можете вставить теневой элемент, как заполнитель!
Для того, чтобы заставить его работать в других браузерах, использование
:-moz-placeholder
,::-moz-placeholder
и:-ms-input-placeholder
в разных селекторов . Невозможно сгруппировать селекторы, потому что, если браузер не распознает селектор, он делает недействительным весь оператор.ОБНОВЛЕНИЕ : приведенный выше код работает только с препроцессором CSS (SASS, LESS ...), без использования препроцессоров:
источник
glyphicon-search
без касания разметки.Псевдоэлементы, подобные
:after
,:before
предназначены только для контейнерных элементов. Элементы, начинающиеся и закрывающиеся в одном месте, например<input/>
, и<img>
т. Д., Не являются контейнерными элементами и, следовательно, псевдоэлементы не поддерживаются. Как только вы примените псевдоэлемент к элементу контейнера, например,<div>
и если вы посмотрите код (см. Изображение), вы поймете, что я имею в виду. На самом деле псевдоэлемент создается внутри элемента контейнера. Это невозможно в случае<input>
или<img>
источник
Рабочее решение в чистом CSS:
Хитрость заключается в том, чтобы предположить, что после текстового поля есть элемент dom.
(*) Ограниченное решение, хотя:
Но в большинстве случаев мы знаем наш код, поэтому это решение кажется эффективным и на 100% CSS и на 0% jQuery.
источник
input#myTextField ~ span:before {
намного лучше, но у span должен быть класс, чтобы он был более явным, как.tick
или.icon
Я нашел этот пост, так как у меня была та же проблема, это было решение, которое работало для меня. В отличие от замены значения ввода, просто удалите его и разместите за ним промежуток такого же размера, к нему можно
:before
применить псевдокласс с выбранным шрифтом значка.источник
Самое большое недоразумение здесь - это значение слов
before
иafter
. Они относятся не к самому элементу, а к содержимому элемента. Такelement:before
же и до содержимого, иelement:after
после содержимого, но оба они все еще находятся внутри исходного элемента.input
Элемент не имеет содержимого в представлении CSS, и так не имеет:before
или:after
содержание псевдо. Это верно для многих других пустых или замененных элементов.За пределами этого элемента нет псевдоэлемента.
В другой вселенной эти псевдоэлементы можно было бы назвать чем-то еще, чтобы сделать это различие более ясным. И кто-то, возможно, даже предложил псевдоэлемент, который действительно находится вне элемента. Пока что это не так в этой вселенной.
источник
hr
с точки зрения CSS всегда был неоднозначным, хотя вы видите это больше при обсуждении цвета.Согласно примечанию в спецификации CSS 2.1, спецификация «не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет определено более подробно в будущей спецификации ». Хотя на
input
самом деле уже не заменяемый элемент, базовая ситуация не изменилась: влияние:before
и:after
на него не определено и, как правило, не оказывает влияния.Решение состоит в том, чтобы найти другой подход к проблеме, которую вы пытаетесь решить таким образом. Помещение сгенерированного содержимого в элемент управления вводом текста будет очень вводящим в заблуждение: пользователю это может показаться частью начального значения в элементе управления, но его нельзя будет изменить - так что оно будет выглядеть как принудительное в начале контроль, но все же он не будет представлен как часть данных формы.
источник
input
элементов, просто неопределенного и зависящего от браузера.Как объяснили другие,
input
s - это своего рода замененные пустые элементы, поэтому большинство браузеров не позволяют генерировать в них::before
ни::after
псевдоэлементы.Тем не менее, Рабочая группа CSS рассматривает в явном виде позволяет
::before
и::after
в случаеinput
имеетappearance: none
.С https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,
источник
попробуйте следующее:
источник
Вы должны иметь какую-то оболочку для ввода, чтобы использовать псевдоэлемент до или после. Вот скрипка, которая имеет значение before в div-обёртке ввода, а затем помещает before перед входом - или, по крайней мере, выглядит так. Очевидно, что это обходной путь, но эффективный в крайнем случае и поддающийся реагированию. Вы можете легко сделать это после, если вам нужно поместить какой-то другой контент.
Рабочая скрипка
Знак доллара внутри входа в виде псевдоэлемента: http://jsfiddle.net/kapunahele/ose4r8uj/1/
HTML:
CSS:
источник
Если вы пытаетесь стилизовать входной элемент с помощью: before и: after, есть вероятность, что вы пытаетесь имитировать эффекты других span, div или даже элементов в вашем стеке CSS.
Как указывает ответ Роберта Коритника,: before и: after можно применять только к элементам контейнера, а элементы ввода не являются контейнерами.
ОДНАКО HTML 5 представил элемент button, который является контейнером и ведет себя как элемент input [type = "submit | reset"].
источник
Резюме
Не работает
<input type="button">
, но работает нормально<input type="checkbox">
.Скрипка : http://jsfiddle.net/gb2wY/50/
HTML :
CSS :
источник
:before
и:after
работает только для узлов, которые могут иметь дочерние узлы, поскольку они вставляют новый узел в качестве первого или последнего узла.источник
Я обнаружил, что вы можете сделать это так:
Показать фрагмент кода
Вам нужно иметь родителя div, который принимает padding и: after. Первый родитель должен быть относительным, а второй div должен быть абсолютным, чтобы вы могли установить позицию после.
источник
У меня есть другая идея использовать это вместо:
источник